Как установить таймаут в методе vueJs

как я могу использовать функцию settimeout() в методе vuejs?

Я уже пробовал что-то вроде этого, но он не работает

fetchHole: function () { 
    //get data
},

addHole: function () {
    //my query add new
    setTimeout(function () { this.fetchHole() }, 1000)
},

Я получаю это сообщение об ошибке: Uncaught TypeError: this.fetchHole is not a function

Ответы

Ответ 1

Попробуйте следующее: setTimeout(this.fetchHole, 1000), потому что this в анонимной функции прикрепляется к этой анонимной функции не к вашей основной функции

Ответ 2

Добавьте вызов bind() к объявлению функции:

setTimeout(function () { this.fetchHole() }.bind(this), 1000)

чтобы ваш компонент Vue this был доступен внутри функции.

^{Боковое примечание: принятый ответ @nospor является более чистым в этой конкретной ситуации. Подход bind немного более обобщен - очень полезно, если вы хотите сделать анонимную функцию, например.}

Ответ 3

Классическая проблема с контекстным this в JavaScript.

Следующая часть кода показывает простое решение - если вы используете ES6 с Vuejs (конфигурация по умолчанию с vuecli y babel). Используйте функцию стрелки

setTimeout(()=>{
   this.yourMethod()
},1000);

Функция стрелки не имеет своего собственного this. Значение this используется окружающая лексическая область;

Функции стрелок - JavaScript | MDN

Ответ 4

Я думаю, что это тоже работает.

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

Ответ 5

Вызов рекурсивный с TimeOut:

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

Ответ 6

Способ связать this с функцией setTimeout, которая еще не упоминалась.

setTimeout(() => { this.fetchHole() },1000)(this)

Ответ 7

Вы можете попробовать:

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