Javascript 使用setTimeout函数时，在Vue中使用v-show或v-if切换可见性

我正在使用Vue2。我有一张表格。单击submit时，我希望显示X时间段内的“加载”Div。在X时间之后，我想再次加载表单。简而言之，单击后切换可见性，执行特定代码并等待特定时间后，再次切换可见性

我有两个部门：

<div v-if="this.isHidden">
 LOADING....
</div>

<div v-if="!this.isHidden"> <!--or v-else -->
  <form @submit.prevent="">
  <!--Fields-->
  <button @click="updateProduct(product)" type="button">Submit</button>
  </form>
</div>

我的方法如下所示：

updateProduct(product){
  this.isHidden = true;
  alert(this.isHidden + 'This correctly shows true. CONTENT correctly toggles and HIDES. LOADING also works correctly and APPEARS.');
  //I want to delay the following code with setTimeout so that I am able to control for how long I want to show LOADING
  setTimeout(function(){
    //do a bunch of tasks that work correctly... 
    axios.post('/api/product/' + product.id, data)
       .then(function (response) {
       console.log(response);
     }).catch(function (error) {
       console.log(error);            
     });

    //After all my code is executed, I am still inside the setTimeout function inside the updateProduct method so now i do this:
    this.isHidden = false;
    alert(this.isHidden + ' This correctly shows false BUT DIVS DO NOT UPDATE ANYMORE, I am stuck with the LOADING div');
   //although my code works fine and the alert shows the correct value for isHidden, my view is stuck in LOADING

  }, 2000);
}

我试图移动此项。isHidden=false；在setTimeout函数之外，但它仍然不会“切换”可见性

我也试着用v-if代替v-show，同样的行为。

只要用v-else就行了

提交
加载。。。。

您的主要问题是setTimeout回调中的

此

因为您使用的是

function（）{}

它不是您想要的

这个

使用箭头符号

setTimeout（（）=>{}，2000）

或者，如果箭头符号吓到您

setTimeout（function（）{}.bind（this），2000）

---

请注意，不要使用

警报进行调试-它会阻止javascript的执行，并可能导致不可靠的调试结果在post发生之前执行-不要使用
警报进行调试，因为它会阻止代码执行，因此结果可能不准确。。。但是主要的问题是这个
。。。它不是setTimeout回调中正确的
此
。。。使用
setTimeout（（）=>{/code>..或
setTimeout（function（）{…etc…}.bind（this），2000）
它不会在
setTimeout
中修复
这个问题。你没有解决这个问题。箭头符号发挥了神奇的作用，感谢你的透彻解释和选择！
updateProduct(product){
  this.isHidden = true;
  alert(this.isHidden + 'This correctly shows true. CONTENT correctly toggles and HIDES. LOADING also works correctly and APPEARS.');
  //I want to delay the following code with setTimeout so that I am able to control for how long I want to show LOADING
  setTimeout(function(){
    //do a bunch of tasks that work correctly... 
    axios.post('/api/product/' + product.id, data)
       .then(function (response) {
       console.log(response);
     }).catch(function (error) {
       console.log(error);            
     });

    //After all my code is executed, I am still inside the setTimeout function inside the updateProduct method so now i do this:
    this.isHidden = false;
    alert(this.isHidden + ' This correctly shows false BUT DIVS DO NOT UPDATE ANYMORE, I am stuck with the LOADING div');
   //although my code works fine and the alert shows the correct value for isHidden, my view is stuck in LOADING

  }, 2000);
}

updateProduct(product) {
  this.isHidden = true;
  setTimeout(() => {
    //do a bunch of tasks that work correctly... 
    axios.post('/api/product/' + product.id, data)
      .then(function(response) {
        console.log(response);
      }).catch(function(error) {
        console.log(error);
      });
    this.isHidden = false;
  }, 2000);
}

updateProduct(product) {
  this.isHidden = true;
  setTimeout(function() {
    //do a bunch of tasks that work correctly... 
    axios.post('/api/product/' + product.id, data)
      .then(function(response) {
        console.log(response);
      }).catch(function(error) {
        console.log(error);
      });
    this.isHidden = false;
  }.bind(this), 2000);
}