Cách đặt bộ hẹn giờ với lớp Vue.js

Question

im chỉ sử dụng Vue.js để cập nhật các bài đăng trên một trang web im xung quanh, đây là những gì ive có được cho đến nay (im vẫn học javascript, và không quá lớn ở đó)

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

Những gì tôi đang tìm để updatePosts kích hoạt sau mỗi x giây, làm cách nào để thực hiện việc này?

ive đã cố gắng làm điều này trong app.js

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

và thử đặt setInterval vào thành phần tự

im khá mất với điều này, whats cách tốt nhất để đạt được điều này?

cập nhậtBài viết chạy mỗi x giây?

Answer 1

Bạn có thể bắt đầu chu kỳ yêu cầu trong created hoặc một nơi khác trong vòng đời. Nó cũng có thể tốt hơn để sử dụng đệ quy ở đây, do đó bạn có thể chờ đợi phản ứng để trở lại trước khi bạn gửi một số khác. Tôi đã không kiểm tra mã này đầy đủ nhưng nó sẽ hoạt động.

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

Tôi cũng gặp sự cố với phạm vi trong Vue.

này nên làm việc

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

Chức năng trong Vue làm việc kinda cách khác nhau, bởi vì phương pháp của bạn updatePosts không phải là chức năng thông thường. Đó là hàm được xác định trong đối tượng $vm.methods. vì vậy nó không thể được gọi thường xuyên như setTimeout($vm.updatePosts). Trên thực tế, $vm.updatePosts không tồn tại. nếu bạn gọi nó là $vm.updatePosts() thì đó là câu chuyện khác. $vm instance tự động gọi phương thức của nó ... Vì vậy, cách chính xác là setTimeout(function(){ self.updatePosts() },2000)