how to set timeout in a vueJs method

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. The this value of the enclosing lexical scope is used;

Arrow functions - JavaScript | MDN