解決Vue 透過下表修改數組,頁面不渲染的問題

下面我就為大家分享一篇解決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。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

使用use註冊Vue全域元件和全域指令的方法

淺聊vue.js匯入css函式庫( elementUi)的方法

使用JS程式碼製作二維碼並且產生功能（詳細教學）

#

以上是解決Vue 透過下表修改數組,頁面不渲染的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！