如何在vueJs方法中设置超时

Question

我如何在vuejs方法中使用settimeout()函数？

我已经尝试过这样的东西,但它不起作用

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

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

我收到此错误消息: Uncaught TypeError: this.fetchHole is not a function

Answer 1

添加bind()对函数声明的调用:

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

这样你的Vue组件this就可以在函数中访问.

^{旁注:在这种特殊情况下,@ nospor接受的答案更清晰.这种bind方法有点概括 - 例如,如果你想做一个匿名函数,它非常有用.}

Answer 2

试试这个:setTimeout(this.fetchHole, 1000)因为this匿名函数附加到该匿名函数而不是主函数

Answer 3

thisJavaScript中的上下文的经典问题.

以下部分代码显示了一个简单的解决方案 - 如果您使用ES6与Vuejs(默认配置与vuecli y babel).使用箭头功能

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

Answer 4

我认为这也有效。

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