如何使用 Vue.js 类设置计时器
Posted
技术标签:
【中文标题】如何使用 Vue.js 类设置计时器【英文标题】:How to set a timer with a Vue.js class 【发布时间】:2016-01-09 00:42:11 【问题描述】:我只是在使用 Vue.js 来更新我正在搞乱的网站上的帖子,这就是我到目前为止所得到的(我还在学习 javascript,并且不太擅长)
[app.js]
var Vue = require('vue');
Vue.use(require('vue-resource'));
var app = new Vue(
el: '#app',
components:
'postlist' : require('./components/postlist/postlist.js')
);
[postlist.js]
module.exports =
template: require('./postlist.template.html'),
data: function ()
return
'search': '',
'posts' :
,
methods:
'updatePosts' : function()
this.$http.get('api/posts', function(responce, status, request)
this.$set('posts', responce.data);
);
;
我正在寻找的是每 x 秒触发一次 updatePosts,我该怎么做?
我尝试在 app.js
中执行此操作setInterval(function()
app.components.postlist.methods.updatePosts(); // doesnt work
app.postlist.updatePosts(); //doesnt work either
, 500);
并尝试将 setInterval 放入组件本身
我很迷茫,实现这一目标的最佳方法是什么?
updatePosts 每 x 秒运行一次?
【问题讨论】:
如果您打算每 5 秒调用一次updatePosts
方法,您应该将 500 更改为 5000 毫秒。并发出警报或console.log
以查看是否每 x 毫秒调用一次 setInterval
。
【参考方案1】:
您可以在 created
或生命周期中的其他位置开始请求周期。在这里使用递归可能会更好,这样您就可以等待响应返回,然后再发送另一个响应。我没有完全测试这段代码,但它应该可以工作。
module.exports =
template: require('./postlist.template.html'),
data: function ()
return
'search': '',
posts:
,
methods:
updatePosts: function ()
this.$http.get('api/posts', function(responce, status, request)
this.posts = responce.data;
setTimeout(this.updatePosts, 2000);
);
,
created: function ()
this.updatePosts();
【讨论】:
它的工作方式有点不同,因为您的方法updatePosts
不是常规函数。它是在$vm.methods
对象中定义的函数。所以不能像setTimeout($vm.updatePosts)
那样定期调用它。实际上$vm.updatePosts
不存在。如果你像$vm.updatePosts()
那样称呼它,那就另当别论了。 $vm
实例自动调用它的方法...所以正确的方法是setTimeout(function() self.updatePosts() ,2000)
setTimeout(function() self.updatePosts() , 2000)
和 setTimeout(self.updatePosts, 2000)
没有区别。
其实这个答案是可以更新的。不再需要var self = this
。我会这样做的。【参考方案2】:
我也遇到了 Vue 中的作用域问题。
这应该可以工作
module.exports =
template: require('./postlist.template.html'),
data: function ()
return
'search': '',
posts:
,
methods:
updatePosts: function ()
var self = this;
self.$http.get('api/posts', function(responce, status, request)
self.posts = responce.data;
setTimeout(function() self.updatePosts() , 2000);
);
,
created: function ()
this.updatePosts();
Vue 中的函数工作方式有点不同,因为您的方法 updatePosts
不是常规函数。它是在$vm.methods
对象中定义的函数。所以它不能像setTimeout($vm.updatePosts)
那样定期调用。实际上$vm.updatePosts
不存在。如果你像$vm.updatePosts()
那样称呼它,那就是另一回事了。 $vm
实例自动调用它的方法...所以正确的方法是setTimeout(function() self.updatePosts() ,2000)
【讨论】:
以上是关于如何使用 Vue.js 类设置计时器的主要内容,如果未能解决你的问题,请参考以下文章