how to set timeout in a vueJs method
how I can use settimeout() function in a vuejs method?
I have already tried something like this, but it doesn't work
fetchHole: function () {
//get data
},
addHole: function () {
//my query add new
setTimeout(function () { this.fetchHole() }, 1000)
},
I get this Error message : Uncaught TypeError: this.fetchHole is not a function
Add a bind()
call to your function declaration:
setTimeout(function () { this.fetchHole() }.bind(this), 1000)
so that your Vue component's this
is accessible within the function.
Side note: @nospor's accepted answer is cleaner in this particular situation. The bind
approach is a bit more generalized - very useful if you want to do an anonymous function, for example.
Try this: setTimeout(this.fetchHole, 1000)
because this
in anonymous function is attached to that anonymous function not to your main function
The classic issue with contextual this
in JavaScript.
The following part of code shows an easy solution - if you are using ES6 with Vuejs (default config with vuecli y babel). Use an arrow function
setTimeout(()=>{
this.yourMethod()
},1000);
An arrow function does not have its own
this
. Thethis
value of the enclosing lexical scope is used;
Arrow functions - JavaScript | MDN