如何使用Vue.js类设置计时器

Question

即时通讯只是使用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);
      });
    }
  }
};

我正在寻找的是让updatePosts每隔x秒启动一次,我该怎么做？

香港专业教育学院尝试在app.js中这样做

setInterval(function()
{
  app.components.postlist.methods.updatePosts(); // doesnt work
  app.postlist.updatePosts(); //doesnt work either
}, 500);

并尝试将setInterval放入组件本身

我很遗憾,这是实现这一目标的最佳途径吗？

updatePosts每x秒运行一次？

Answer 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();
  }
}

Answer 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.methodsobject中定义的函数.所以它不能像往常一样被调用setTimeout($vm.updatePosts).实际上$vm.updatePosts并不存在.如果你称它为$vm.updatePosts()不同的故事. $vm实例自动调用其方法......所以正确的方法是setTimeout(function(){ self.updatePosts() },2000)