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

vue.js auto reload / refresh data with timer

本文关键字：加载 数据 刷新 新加载 js 定时器 vue      更新时间：2024-05-06

（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',

});

无需重新发明轮子，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);
        }
    },
    beforeUnmount () {
      this.cancelAutoUpdate();
    }
});
new Vue({
    el: 'body',
});
相关文章：