vue.js 使用計時器自動重新加載/刷新數據

Question

（Vue.js 新手）我從 get 請求中獲取數據以顯示日歷信息。 我希望每 5 分鍾更新一次。

文檔中沒有關於自動重新加載的內容 - 我將如何實現這一點？ 我是否在文件中使用標准 javascript 或其他內容？

我的完整 app.js 如下：

Vue.component('events', {
    template: '#events-template',

    data: function() {
        return {
            list: []
        }
    },

    created: function() {

        this.fetchEventsList();
    },

    methods: {

        fetchEventsList: function() {

            this.$http.get('events', function(events) {

                this.list = events;

            }).bind(this);

        }

    }

});

new Vue({
    el: 'body',


});

Answer 1

無需重新發明輪子， window.setInterval()做得很好

Vue.component('events', {
    template: '#events-template',

    data () {
        return {
            list: [],
            timer: ''
        }
    },
    created () {
        this.fetchEventsList();
        this.timer = setInterval(this.fetchEventsList, 300000);
    },
    methods: {
        fetchEventsList () {
            this.$http.get('events', (events) => {
                this.list = events;
            }).bind(this);
        },
        cancelAutoUpdate () {
            clearInterval(this.timer);
        }
    },
    beforeDestroy () {
      this.cancelAutoUpdate();
    }
});

new Vue({
    el: 'body',
});