Question

24

vue.js auto reload / refresh data with timer

rated 0 times [ 29] [ 5] / answers: 1 / hits: 110104 / 8 Years ago, tue, april 12, 2016, 12:00:00

(New to Vue.js) I fetch data from a get request to display calendar information. I want this to update every 5 minutes.

Nothing in the docs about auto reload - how would I go about implementing this? Do I use standard javascript within the file or something else?

My complete app.js below:

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





});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

madelyn

Add To Favorites

Follow

Total Points: 449

Total Questions: 100

Total Answers: 100

Location: Seychelles

Member since Fri, May 7, 2021

3 Years ago

madelyn questions

1 Select value doesnt change the first time I trigger onChange event when using setSate React

Tue, Jan 11, 22, 00:00, 2 Years ago

1 React Native performance slow

Wed, Jul 28, 21, 00:00, 3 Years ago

1 MUI Datatable custom toolbar

Wed, Jul 14, 21, 00:00, 3 Years ago

1 Multi row swiper not working in react from swiper.js

Sat, Nov 7, 20, 00:00, 4 Years ago

1 How to make step wizard form in ReactJs?

Thu, Sep 3, 20, 00:00, 4 Years ago

View All

answered 8 Years ago dorothylorrainef · Accepted Answer

No need to re-invent the wheel, window.setInterval() does the job pretty well

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

});