在使用 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) {&nbsp; this.isHidden = true;&nbsp; setTimeout(() => {&nbsp; &nbsp; //do a bunch of tasks that work correctly...&nbsp;&nbsp; &nbsp; axios.post('/api/product/' + product.id, data)&nbsp; &nbsp; &nbsp; .then(function(response) {&nbsp; &nbsp; &nbsp; &nbsp; console.log(response);&nbsp; &nbsp; &nbsp; }).catch(function(error) {&nbsp; &nbsp; &nbsp; &nbsp; console.log(error);&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; this.isHidden = false;&nbsp; }, 2000);}或者，如果箭头符号让您害怕setTimeout(function() {}.bind(this), 2000)updateProduct(product) {&nbsp; this.isHidden = true;&nbsp; setTimeout(function() {&nbsp; &nbsp; //do a bunch of tasks that work correctly...&nbsp;&nbsp; &nbsp; axios.post('/api/product/' + product.id, data)&nbsp; &nbsp; &nbsp; .then(function(response) {&nbsp; &nbsp; &nbsp; &nbsp; console.log(response);&nbsp; &nbsp; &nbsp; }).catch(function(error) {&nbsp; &nbsp; &nbsp; &nbsp; console.log(error);&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; this.isHidden = false;&nbsp; }.bind(this), 2000);}顺便说一句，不要用于alert调试 - 它会阻止 javascript 的执行，并可能导致不可靠的调试结果

Answer 2

只需使用 V-else<div v-if="!this.isHidden"> <!--or v-else -->&nbsp; <form @submit.prevent="">&nbsp; <!--Fields-->&nbsp; <button @click="updateProduct(product)" type="button">Submit</button>&nbsp; </form></div><div v-else><div v-if="this.isHidden">&nbsp;LOADING....</div></div>