Vue用下表修改數(shù)組時(shí)頁(yè)面不渲染如何處理
來(lái)源:懂視網(wǎng)
責(zé)編:小采
時(shí)間:2020-11-27 19:57:58
Vue用下表修改數(shù)組時(shí)頁(yè)面不渲染如何處理
Vue用下表修改數(shù)組時(shí)頁(yè)面不渲染如何處理:這次給大家?guī)?lái)Vue用下表修改數(shù)組時(shí)頁(yè)面不渲染如何處理,解決Vue用下表修改數(shù)組時(shí)頁(yè)面不渲染的注意事項(xiàng)有哪些,下面就是實(shí)戰(zhàn)案例,一起來(lái)看一下。需要注意的是,Vue之所以能夠監(jiān)聽Model狀態(tài)的變化,是因?yàn)镴avaScript語(yǔ)言本身提供了Proxy或者Object
導(dǎo)讀Vue用下表修改數(shù)組時(shí)頁(yè)面不渲染如何處理:這次給大家?guī)?lái)Vue用下表修改數(shù)組時(shí)頁(yè)面不渲染如何處理,解決Vue用下表修改數(shù)組時(shí)頁(yè)面不渲染的注意事項(xiàng)有哪些,下面就是實(shí)戰(zhàn)案例,一起來(lái)看一下。需要注意的是,Vue之所以能夠監(jiān)聽Model狀態(tài)的變化,是因?yàn)镴avaScript語(yǔ)言本身提供了Proxy或者Object
這次給大家?guī)?lái)Vue用下表修改數(shù)組時(shí)頁(yè)面不渲染如何處理,解決Vue用下表修改數(shù)組時(shí)頁(yè)面不渲染的注意事項(xiàng)有哪些,下面就是實(shí)戰(zhàn)案例,一起來(lái)看一下。
需要注意的是,Vue之所以能夠監(jiān)聽Model狀態(tài)的變化,是因?yàn)镴avaScript語(yǔ)言本身提供了Proxy或者Object.observe()機(jī)制來(lái)監(jiān)聽對(duì)象狀態(tài)的變化。但是,對(duì)于數(shù)組元素的賦值,卻沒有辦法直接監(jiān)聽,因此,如果我們直接對(duì)數(shù)組元素賦值:
vm.todos[0] = {
name: 'New name',
description: 'New description'
};
會(huì)導(dǎo)致Vue無(wú)法更新View。
正確的方法是不要對(duì)數(shù)組元素賦值,而是更新:
vm.todos[0].name = 'New name';
vm.todos[0].description = 'New description';
或者,通過(guò)splice()方法,刪除某個(gè)元素后,再添加一個(gè)元素,達(dá)到“賦值”的效果:
var index = 0;
var newElement = {...};
vm.todos.splice(index, 1, newElement);
Vue可以監(jiān)聽數(shù)組的splice、push、unshift等方法調(diào)用,所以,上述代碼可以正確更新View。

相信看了本文案例你已經(jīng)掌握了方法,更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章!
推薦閱讀:
在vue里如何使用xe-utils
vue-router進(jìn)行build時(shí)不顯示路由頁(yè)面怎么處理
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Vue用下表修改數(shù)組時(shí)頁(yè)面不渲染如何處理
Vue用下表修改數(shù)組時(shí)頁(yè)面不渲染如何處理:這次給大家?guī)?lái)Vue用下表修改數(shù)組時(shí)頁(yè)面不渲染如何處理,解決Vue用下表修改數(shù)組時(shí)頁(yè)面不渲染的注意事項(xiàng)有哪些,下面就是實(shí)戰(zhàn)案例,一起來(lái)看一下。需要注意的是,Vue之所以能夠監(jiān)聽Model狀態(tài)的變化,是因?yàn)镴avaScript語(yǔ)言本身提供了Proxy或者Object