2015-10-11 23 views
8

im semplicemente usando Vue.js per aggiornare i post su un sito con cui si intromette, questo è ciò che ho ottenuto finora (sto ancora imparando javascript e non troppo bello)Come impostare un timer con una classe Vue.js

[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); 
     }); 
    } 
    } 
}; 

Quello che sto cercando per fare in modo che updatePosts si spenga ogni x secondi, come posso fare?

Ive ha provato a fare questo nei app.js

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

e ha cercato di mettere il setInterval nella componente stesso

im abbastanza perso con questo, che cosa è il modo migliore per raggiungere questo obiettivo?

updatePost in esecuzione ogni x secondi?

+0

Se si desidera che il metodo 'updatePosts' venga chiamato ogni 5 secondi, è necessario modificare da 500 a 5000 ms. E metti un avviso o 'console.log' per vedere se il' setInterval' viene chiamato ogni x milli-secondi. – Lucky

risposta

2

È possibile avviare il ciclo di richiesta in created o da qualche altra parte nel ciclo di vita. Probabilmente è anche meglio usare la ricorsione qui, così puoi aspettare che la risposta torni prima di mandarne un'altra. Non ho testato completamente questo codice, ma dovrebbe funzionare.

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(); 
    } 
} 
+0

funziona in un modo diverso, perché il metodo 'updatePosts' non è una funzione regolare. È definita dalla funzione nell'oggetto '$ vm.methods'. quindi non può essere chiamato regolarmente come 'setTimeout ($ vm.updatePosts)'. In realtà '$ vm.updatePosts' non esiste. se lo hai chiamato come '$ vm.updatePosts()' è una storia diversa. L'istanza di '$ vm' chiama automaticamente il suo metodo ... Quindi il modo corretto è' setTimeout (function() {self.updatePosts()}, 2000) ' – WhipsterCZ

+0

Non c'è differenza tra' setTimeout (function() {self.updatePosts() }, 2000) 'e' setTimeout (self.updatePosts, 2000) '. –

+0

Infatti questa risposta può essere aggiornata. Non c'è più bisogno di 'var self = this'. Lo farò. –

5

Ho anche problemi con gli ambiti in Vue.

questo dovrebbe funzionare

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

funzioni in Vue funziona un pò modo diverso, perché il metodo non è updatePosts funzione regolare. È una funzione definita nell'oggetto $vm.methods. quindi non può essere chiamato regolarmente come setTimeout($vm.updatePosts). In realtà $vm.updatePosts non esiste. se lo chiami come $vm.updatePosts() è una storia diversa. L'istanza $vm chiama automaticamente il suo metodo ... Quindi il modo corretto è setTimeout(function(){ self.updatePosts() },2000)