Vue wants to implement a problem encountered by using a timer to change the appearance and concealment of DOM.

<el-dialog title="" :visible.sync="matchingOrderShow" width="30%">
  <div v-show="matchingOrderShow_icon">
    <i class="el-icon-loading icon_c_loading"></i>
    
  </div>
  <div v-show="!matchingOrderShow_icon">
    
  </div>
</el-dialog>

layout code, click a button to open the pop-up window. The default data value is false Hidden

matchingOrderShow: false,
matchingOrderShow_icon: undefined,

js Code

matchingOrder(){
  this.matchingOrderShow = true
  this.matchingOrderShow_icon = true
  console.log(this.matchingOrderShow_icon)
  setTimeout(function () {
    this.matchingOrderShow_icon = false
    console.log(this.matchingOrderShow_icon)
  },2000)
}
true2dom

but the page structure hasn"t changed, so I"d like to ask how to change it

Element-ui vue.js javascript

Aug.17,2021

if you write setTimeout in this way, it has its own scope of callback. this does not point to vm . The easiest solution is to change it to the arrow function

setTimeout(() => {
  this.matchingOrderShow_icon = false;
}, 2000);

Previous: Dataframe grouping problem

Next: The jump https in Mini Program's webview web page becomes http.

File-list has multiple values in the upload file upload. How to know the index of the selected value when deleting it?
file-list has multiple values in the upload file upload. How to know the index of the selected value when deleting it ...

Element-ui vue.js javascript

Mar.02,2021
Vue+element, console error a.apply is not a function
shows that vue-router switching to a new view will pop up a large number of such errors ...

Element-ui vue.js javascript

Mar.05,2021
There was a problem when append multiple uploaded files to FormData.
first, use the upload component of elementUI to save the file to form.picFile and form.corFile respectively, and then new a FormData object at the time of submission, and then append the file, but there is only one file in the data sent. What is the rea...

Element-ui vue.js javascript

Mar.05,2021
Element-ui+vue built a tree-shaped table, access to a large number of data when the page directly stuck, looking for a solution!
the project needs to make a tree-shaped table, as shown in the figure. The page still flows when there is a small amount of data. After importing thousands of pieces of data, it is directly jammed. When you first request to render DOM, you use 3room5s. ...

Element-ui vue.js javascript

Mar.09,2021
How does the vue element-UI table table force re-rendering of data?
1. Click the View hide current button and this content to show that another content can. 2. At first, manual display:none, found that after turning the page, the effect of the current cell none on the next page was still there. 3. So I tried to <...

Element-ui vue.js javascript

Mar.14,2021
Problems encountered in uploading files by element-ui
now you need to upload the attachment to the server. The file type can only be processed by doc,png,txt, before it is submitted. the following example is basically picked from the official website of element-ui, because I only need to upload one file, ...

Element-ui vue.js javascript

Mar.19,2021
How does elementUi choose select to choose the value? of the value
as follows, how to get the value value selected by select when sending a request? <el-form-item> <el-select v-model="team[0].value" size="small"> <el-option v-for="item in team" :label=...

Element-ui vue.js javascript

Mar.20,2021
How to uncheck the el-radio of element-ui by clicking again when it is already selected?
< H1 > element-ui el-radio how can I click to deselect it again when it is already selected? < H1 > <template> <el-radio-group v-model="radio2" @change="onRadioChange"> <el-radio :label="3">&l...

Front-end element-ui vue.js javascript

Mar.20,2021
How to submit the elementUI form?
as shown in the figure, when the form is defined and clicked on submit, how to quickly get all the name value similar to jQuery serialize, can not define the name value one by one, and then send the request after the object is stitched together? ...

Element-ui vue.js javascript

Mar.20,2021
How does elementUI click a checkbox to let input hide it?
how to let input display when clicking on a group, click on individual input to hide, (and how to get the value entered by input) <el-radio-group v-model="ruleForm.nature" :change="change"> <el-radio label="&qu...

Element-ui vue.js javascript

Mar.21,2021
Element cyclic grid layout
as shown in the picture, I need to loop small pieces of col. ...

Element-ui vue.js javascript

Mar.22,2021
Vue element ui el-radio-group automatically selects bug, 's very strange mysterious bug.
when I make changes to a form, the option from the background is automatically filled in by v-modle. something strange has happened! For the same code, one can be selected automatically, but not the other <el-radio-group v-model="gender"...

Element-ui vue.js javascript

Mar.23,2021
Vue realizes the function of clicking on the new subsidiary in the form pop-up box of the new unit.
problem description 1010: : : vuehtml: : if I remove: key= "index ", I will not report an error, but it should not be so. There is another problem. In the new process, the key name of the v-model binding of the form is the same, so the value ...

Element-ui vue.js javascript

Mar.25,2021
Element ui select initialization
The code is as follows. The el-select, in the table is generally set in data after reading the online instructions (for example, risk_type is set to 0), but his initial value in my table is different, how to set this. Tried to set the select binding val...

Element-ui vue.js javascript

Mar.25,2021
How do element-ui el-tree click node events get the event source?
because firefox does not support window.event s usual solution var evt = window.event | | arguments.callee.caller.arguments [0] Uncaught TypeError: caller , callee , and arguments properties may not be accessed on strict mode functions or...

Element-ui vue.js javascript

Mar.28,2021
How to update the element UI tree control after lazily loading the state and adding, deleting and modifying the tree?
the element UI tree control (el-tree) is being used in the form of lazy loading (lazy +: load= "loadNode " method). The business is as follows: 1-add a level 1 node 2-any node can add a new child node 3-edit node 4-delete node -(problems encountere...

Element-ui vue.js javascript

Mar.28,2021
Pseudo class: invalid after setting, ask the reason
is ready to add hierarchical splitters to the tree component, which needs to be styled with pseudo classes, but it has no effect. The code is as follows: -sharptree-wrap { .el-tree-node.is-expanded { position: relative; >.el-tree-node__ch...

Element-ui vue.js javascript

Mar.29,2021
Element UI Message is triggered repeatedly when both input boxes are used to check the pop-up box.
<el-input style= width:336px;height:20px; placeholder="" v-model="creditCode" @blur="creditInfo" :maxlength=25> < el-input> <el-input style= width:336px;height:20px; ...

Element-ui vue.js javascript html5

Mar.30,2021
A pop-up window editor for vue+Element UI
is a pop-up window with three select, terminal types, functional modules, and functional subdivisions. The function module comes out only after the terminal is selected, and the function subdivision is the same. The data in is fetched from the list. Be...

Element-ui vue.js javascript

Mar.30,2021
Vue Element-UI menu navigation, activated by default, only after refresh, how to return a responsibility?
a. I made it with vuex. b. Change the value of default-active in the route intercept. c. Get this path from the navigation menu. is fine in theory, but! The current page is not selected until is refreshed. Direct click on the menu is not selected...

Element-ui vue.js javascript

Mar.30,2021