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

Question

我正在使用Vue2。我有一个表格。单击提交时，我想显示“正在加载”Div X 时间。经过 X 时间后，我想再次加载表单。简而言之，单击后，切换可见性，执行某些代码并等待一定时间后，再次切换它。我有两个 Div：<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>加载时，仅显示“CONTENT”（isHidden = false）。当执行 updateProduct() 方法时，我希望 div“LOADING”显示 X 秒（isHidden=true），而“CONTENT”div 必须隐藏。然后在 setTimeout 函数内执行一些代码后，我希望它们再次切换（isHidden = false）。data: function() {   return {     //isHidden is initialized as false     isHidden: false,   };},我的方法如下所示：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);}我试图移动 this.isHidden = false; 在 setTimeout 函数之外，但它仍然不会“切换”可见性。我还尝试使用 v-if 而不是 v-show，行为相同。

Answer 1

您的主要问题this在 setTimeout 回调内部

因为你使用的function() {}不是你想要this的

要么使用箭头表示法setTimeout(() => {}, 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);

}

或者，如果箭头符号让您害怕setTimeout(function() {}.bind(this), 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);

}

顺便说一句，不要用于alert调试 - 它会阻止 javascript 的执行，并可能导致不可靠的调试结果

Answer 2

只需使用 V-else

<div v-if="!this.isHidden"> <!--or v-else -->

  <form @submit.prevent="">

  <!--Fields-->

  <button @click="updateProduct(product)" type="button">Submit</button>

  </form>

</div>

<div v-else>

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

 LOADING....

</div>

</div>