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

Arrow functions - JavaScript | MDN