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

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

我已尝试在 app.js

中执行此操作

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

并尝试将setInterval放入组件本身

我很遗憾，最好的方法是什么？

每隔x秒运行一次updatePosts？

Answer 1

我也在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)

Answer 2

您可以在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();
  }
}

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

2 个答案: