下面我就為大家分享一篇解決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。
上面是我整理給大家的,希望今後對大家有幫助。
相關文章:
淺聊vue.js匯入css函式庫( elementUi)的方法
#以上是解決Vue 透過下表修改數組,頁面不渲染的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!