解決Vue 通過下表修改數(shù)組,頁面不渲染的問題
更新時(shí)間：2018年03月08日 14:18:02 作者：麻球科技-菅雙鵬
下面小編就為大家分享一篇解決Vue 通過下表修改數(shù)組,頁面不渲染的問題。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
需要注意的是，Vue之所以能夠監(jiān)聽Model狀態(tài)的變化，是因?yàn)镴avaScript語言本身提供了Proxy或者Object.observe()機(jī)制來監(jiān)聽對(duì)象狀態(tài)的變化。但是，對(duì)于數(shù)組元素的賦值，卻沒有辦法直接監(jiān)聽，因此，如果我們直接對(duì)數(shù)組元素賦值：
vm.todos[0] = {
name: 'New name',
description: 'New description'
};
會(huì)導(dǎo)致Vue無法更新View。
正確的方法是不要對(duì)數(shù)組元素賦值，而是更新：
vm.todos[0].name = 'New name'; vm.todos[0].description = 'New description';
或者，通過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。
以上這篇解決Vue 通過下表修改數(shù)組,頁面不渲染的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React和Vue實(shí)現(xiàn)路由懶加載的示例代碼
路由懶加載是一項(xiàng)關(guān)鍵技術(shù),它可以幫助我們提高Web應(yīng)用的加載速度,本文主要介紹了React和Vue實(shí)現(xiàn)路由懶加載的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
單頁面是指整個(gè)應(yīng)用程序只有一個(gè)唯一完整的 HTML 頁面，而其它所謂的頁面，其實(shí)都是組件片段而已，切換頁面也只是切換一個(gè) HTML 中顯示不同的組件片段。在今后所有的開發(fā)項(xiàng)目都是單頁面應(yīng)用2022-08-08
這篇文章主要給大家介紹了關(guān)于Vue全局變量的定義及使用的相關(guān)資料,定義完全局變量后,我們可以在程序中的任何地方使用它們,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
vue 查看dist文件里的結(jié)構(gòu)(多種方式)
本文通過三種方式給大家介紹了vue 查看dist文件里的結(jié)構(gòu),非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
本文主要介紹了elementui下image組件的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
在微信小程序中，可以使用全局配置和使用開發(fā)、體驗(yàn)、生產(chǎn)環(huán)境的地址，這篇文章主要介紹了Vue微信和uniapp配置環(huán)境地址,需要的朋友可以參考下2023-07-07
vue實(shí)現(xiàn)文章點(diǎn)贊和差評(píng)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文章點(diǎn)贊和差評(píng)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了Vue+ ArcGIS JavaScript APi,文中需要注意ArcGIS JavaScript3.x 和ArcGIS JavaScript 4.x框架差異較大，本文從環(huán)境搭建開始到測試運(yùn)行給大家講解的非常詳細(xì)，需要的朋友可以參考下2022-11-11
混入 (mixin) 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復(fù)用功能。一個(gè)混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)2022-10-10
springboot?vue接口測試前端動(dòng)態(tài)增刪表單功能實(shí)現(xiàn)
這篇文章主要為大家介紹了springboot?vue接口測試前端動(dòng)態(tài)增刪表單功能實(shí)現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05