Wie setze ich einen Timer mit einer Vue.js Klasse

Question

Ich benutze nur Vue.js, um Beiträge auf einer Seite zu aktualisieren, mit denen ich fertig bin, das ist, was ich bisher gelernt habe (ich lerne immer noch Javascript, und nicht zu gut darin

)

[app.js]

var Vue = require('vue'); 

Vue.use(require('vue-resource')); 

var app = new Vue({ 

    el: '#app', 

    components: { 
    'postlist' : require('./components/postlist/postlist.js') 
    } 

}); 

[postlist.js]

module.exports = { 

    template: require('./postlist.template.html'), 

    data: function() { 
    return { 
     'search': '', 
     'posts' : {} 
    } 
    }, 

    methods: { 
    'updatePosts' : function() 
    { 
     this.$http.get('api/posts', function(responce, status, request) 
     { 
     this.$set('posts', responce.data); 
     }); 
    } 
    } 
}; 

Was ich suche ist updatePosts alle x Sekunden auslösen, wie mache ich das?

ive versucht, dies in den app.js tun

setInterval(function() 
{ 
    app.components.postlist.methods.updatePosts(); // doesnt work 
    app.postlist.updatePosts(); //doesnt work either 
}, 500); 

und versuchte, die setInterval in das Bauteil selbst mit dieser

im ziemlich verloren setzen, was ist der beste Weg, um dies zu erreichen?

updatePosts läuft alle x Sekunden?

Answer 1

Sie können den Anforderungszyklus in created oder anderswo im Lebenszyklus starten. Es ist auch wahrscheinlich besser, Rekursion hier zu verwenden, damit Sie auf die Antwort warten können, bevor Sie eine andere zurücksenden. Ich habe diesen Code nicht vollständig getestet, aber es sollte funktionieren.

module.exports = { 
    template: require('./postlist.template.html'), 
    data: function() { 
    return { 
     'search': '', 
     posts: {} 
    } 
    }, 
    methods: { 
    updatePosts: function() { 
     this.$http.get('api/posts', function(responce, status, request) { 
     this.posts = responce.data; 
     setTimeout(this.updatePosts, 2000); 
     }); 
    } 
    }, 
    created: function() { 
    this.updatePosts(); 
    } 
} 

Answer 2

Ich habe auch Probleme mit Bereichen in Vue.

sollte diese

arbeiten

module.exports = { 
    template: require('./postlist.template.html'), 
    data: function() { 
    return { 
     'search': '', 
     posts: {} 
    } 
    }, 
    methods: { 
    updatePosts: function() { 
     var self = this; 
     self.$http.get('api/posts', function(responce, status, request) { 
     self.posts = responce.data; 
     setTimeout(function(){ self.updatePosts() }, 2000); 
     }); 
    } 
    }, 
    created: function() { 
    this.updatePosts(); 
    } 
} 

Funktionen in Vue irgendwie anders funktioniert, weil Ihre Methode updatePosts nicht reguläre Funktion ist. Es ist eine Funktion definiert in $vm.methods Objekt. So kann es nicht regelmäßig wie setTimeout($vm.updatePosts) aufgerufen werden. Eigentlich existiert $vm.updatePosts nicht. wenn Sie es wie $vm.updatePosts() nennen, ist es eine andere Geschichte. $vm Instanz ruft automatisch ihre Methode auf ... So ist der korrekte Weg setTimeout(function(){ self.updatePosts() },2000)