首頁 > web前端 > js教程 > Vue用下表修改數組時頁面不渲染如何處理

Vue用下表修改數組時頁面不渲染如何處理

php中世界最好的语言
發布: 2018-03-28 17:30:43
原創
1954 人瀏覽過

這次帶給大家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 。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

在vue裡如何使用xe-utils

vue-router進行build時不顯示路由頁面怎麼處理

以上是Vue用下表修改數組時頁面不渲染如何處理的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板