Vue 通過下表修改數組,頁面不渲染問題

需要注意的是,Vue之所以能夠監聽Model狀態的變化,是因爲JavaScript語言本身提供了Proxy或者Object.observe()機制來監聽對象狀態的變化。但是,對於數組元素的賦值,卻沒有辦法直接監聽,因此,如果我們直接對數組元素賦值:

vm.todos[0] = {
    name: 'New name',
    description: 'New description'
};

會導致Vue無法更新View。

正確的方法是不要對數組元素賦值,而是更新:

vm.todos[0].name = 'New name';
vm.todos[0].description = 'New description';

或者,通過splice()方法,刪除某個元素後,再添加一個元素,達到“賦值”的效果:

var index = 0;
var newElement = {...};
vm.todos.splice(index, 1, newElement);

Vue可以監聽數組的splice、push、unshift等方法調用,所以,上述代碼可以正確更新View。



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章