[Vuejs]-V-If not updating

3👍

That doesn’t work because of this code :

setTimeout(function() {
  this.isLoading = false; 
}, 3000);

In the code above, the value of this is different because you used a function which has a dynamic execution context (this).

To solve this problem you can store the value of this and then use it in the function :

const that = this
setTimeout(() => {
  that.isLoading = false;
}, 3000)

You can also directly bind this of the method :

setTimeout(function () {
  this.isLoading = false;
}.bind(this), 3000)

Finally, the more convenient solution is to use an arrow function (which does not define its own this):

setTimeout(() => {
  this.isLoading = false;
}, 3000)
👤Namysh

1👍

The isLoading is never returning to false because this in your setTimeout function is not referencing to the vue instance but to his own scope.

Making it an arrow function will fix this :

setTimeout(() => {
   this.isLoading = false;
}, 3000);

Leave a comment