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

clipboard.png


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

.

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);
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b380cd-2c0f7.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b380cd-2c0f7.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?