2016-04-12 23 views
5

(Yeni ile Vue.js arasında) ile yeniden yükle/yeniler. Takvim bilgilerini görüntülemek için bir istek isteğimden veri alırım. Bunu her 5 dakikada bir güncellemek istiyorum.vue.js otomatik zamanlayıcıyı

Otomatik yeniden yükleme hakkında dokümanlardaki hiçbir şey - bu uygulamayı nasıl uygularım? Dosyadaki standart javascript'i veya başka bir şey kullanıyor muyum? Aşağıda

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


}); 

cevap

20

Gerek tekerleği yeniden icat etmek, window.setInterval() oldukça iyi bir iş yapar:

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

    this.fetchEventsList(); 
    this.timer = setInterval(this.fetchEventsList, 300000) 

}, 
methods: { 

    fetchEventsList: function() { 

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

      this.list = events; 

     }).bind(this); 

    }, 
    cancelAutoUpdate: function() { clearInterval(this.timer) } 

}, 
beforeDestroy() { 
    clearInterval(this.timer) 
} 
+0

Mükemmel! İptal işlevi de ekleyerek güzel bir iş. Teşekkür ederim. –

+2

Öneri: 'removeAutoUpdate() işlevini çalıştıran bileşen' yok edildi() ' –

+0

İyi nokta Karl! –