Home » Php » javascript – how to set timeout in a vueJs method

javascript – how to set timeout in a vueJs method

Posted by: admin April 23, 2020 Leave a comment


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

How to&Answers:

Try this: setTimeout(this.fetchHole, 1000) because this in anonymous function is attached to that anonymous function not to your main 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.


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


An arrow function does not have its own this. The this value of
the enclosing lexical scope is used;

Arrow functions – JavaScript | MDN


I think this works too.

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


Call recursive with TimeOut:

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


You can try :

  let vm = this
  setTimeout(function(){vm.fetchHole()}, 1000)