web-dev-qa-db-ja.com

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


});
javascriptreloadvue.js
24
Mike Thrussell

車輪を再発明する必要はありません、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 () {
      clearInterval(this.timer)
    }
});

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