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

标签 javascript reload vue.js

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

关于javascript - vue.js 使用计时器自动重新加载/刷新数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36572540/

相关文章:

javascript - 在 GAS 嵌入式环境中通过 Javascript 刷新 HTML 文档

javascript - 我无法将 json 字符串转换为 Vue.js 和 javascript 中的对象

javascript - 是否存在 volatile (有时限)变量?

javascript - 如何在 VueJS 中将值从一个子组件传递到另一个子组件?

javascript - 安装tensorflowjs节点时出错 |命令失败 : node-pre-gyp install --fallback-to-build

javascript - 535 种使用 JavaScript 重新加载页面的方法 - 结果是什么?

javascript - 固定位置,在特定高度显示/隐藏

php - 来自 mysql 服务器的 ajax.reload 出现错误 : property is undefined

javascript - 如何通过 Crypto-JS 解密 AES 128-CBC?

Javascript:Math.floor 未按预期工作