how to set timeout in a vueJs method

Question

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

Answer 1

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);

Answer 2

I think this works too.

var self = this;
setTimeout(function () { self.fetchHole() } , 1000)

Answer 3

Call recursive with TimeOut:

    save: function () {
      this.progressToProced = 0
      this.progress()          
    },
    progress: function () {
      if (this.progressToProced < 100) {
        this.progressToProced++
        setTimeout(function () { this.progress() }.bind(this), 100)
      }
    }

Answer 4

Try this: setTimeout(this.fetchHole, 1000) because this in anonymous function is attached to that anonymous function not to your main function

Answer 5

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.}