如何使用 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 类设置计时器的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Vue.js 类组件设置 PayPal 智能按钮

vue.js 使用计时器自动重新加载/刷新数据

如何在Vue.js中创建简单的10秒倒计时

如何在vue js html中将到期时间显示为报价的计时器?

如何使用 vue js 制作固定导航栏?

如何在 vue.js 2 中使用 lang 类 laravel?