解決vue中修改了數(shù)據(jù)但視圖無(wú)法更新的情況
我們有時(shí)候常碰到vue中明明修改了數(shù)據(jù)，但是視圖無(wú)法更新，因此我總結(jié)了一點(diǎn)點(diǎn)碰到此類的情況：
1、v-for遍歷的數(shù)組，當(dāng)數(shù)組內(nèi)容使用的是arr[0].xx =xx更改數(shù)據(jù)，vue無(wú)法監(jiān)測(cè)到
數(shù)組數(shù)據(jù)變動(dòng)：我們使用某些方法操作數(shù)組，變動(dòng)數(shù)據(jù)時(shí)，有些方法無(wú)法被vue監(jiān)測(cè)，有些可以
Vue包裝了數(shù)個(gè)數(shù)組操作函數(shù)，使用這些方法操作的數(shù)組去，其數(shù)據(jù)變動(dòng)時(shí)會(huì)被vue監(jiān)測(cè)：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
vue2.0還增加個(gè)方法可以觀測(cè)Vue.set(items, indexOfItem, newValue)
filter(), concat(), slice() 。這些不會(huì)改變?cè)紨?shù)組，但總是返回一個(gè)新數(shù)組。當(dāng)使用非變異方法時(shí)，可以用新數(shù)組替換舊數(shù)組
Vue 不能檢測(cè)以下變動(dòng)的數(shù)組：
① 當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，vm.items[indexOfItem] = newValue
② 當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)，例如： vm.items.length = newLength
話不多說(shuō)，上代碼,并且附上效果圖：
<body>
<div id="app">
<ul>
<li v-for="(item,index) in gc">
<span>{{item.name}}-{{index}}</span>
<span>{{item.age}}-{{index}}</span>
</li>
</ul>
<button @click="add">click</button>
</div>
<script>
new Vue({
el:'#app',
data:{
gc:[
{name:'zhangsan',age:10},
{name:'lisi',age:21},
{name:'wangwu',age:22},
{name:'wangwu',age:22}
]
},methods:{
// 當(dāng)點(diǎn)擊事件觸發(fā)時(shí)候會(huì)修改掉gc[0]的值為lisi,但是視圖不會(huì)發(fā)生變化
add(){
this.gc[0] ={name:'lisi',age:22}
}
}
})
</script>
</body>
以上Vue 不能檢測(cè)數(shù)據(jù)變動(dòng)的數(shù)組的2種方式解決辦法
將代碼中的add()方法改為:
add(){
// this.gc[0] ={name:'lisi',age:22} //這樣直接修改不能被vue監(jiān)聽到
Vue.set(this.gc,0,{name:'lisi',age:22}) //這樣就能被vue監(jiān)控到，更新視圖
}
以上這篇解決vue中修改了數(shù)據(jù)但視圖無(wú)法更新的情況就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+spring boot實(shí)現(xiàn)校驗(yàn)碼功能
這篇文章主要為大家詳細(xì)介紹了vue+spring boot實(shí)現(xiàn)校驗(yàn)碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
讓axios發(fā)送表單請(qǐng)求形式的鍵值對(duì)post數(shù)據(jù)的實(shí)例
今天小編就為大家分享一篇讓axios發(fā)送表單請(qǐng)求形式的鍵值對(duì)post數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
寫一個(gè)移動(dòng)端慣性滑動(dòng)&回彈Vue導(dǎo)航欄組件 ly-tab
前一段時(shí)間小編寫一個(gè)移動(dòng)端慣性滑動(dòng)&回彈Vue導(dǎo)航欄組件 ly-tab，覺的非常實(shí)用，大家可能在做項(xiàng)目時(shí)會(huì)用到，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-03-03
vue項(xiàng)目中應(yīng)用ueditor自定義上傳按鈕功能
這篇文章主要介紹了vue項(xiàng)目中應(yīng)用ueditor自定義上傳按鈕功能，文中以vue-cli生成的項(xiàng)目為例給大家介紹了vue項(xiàng)目中使用ueditor的方法，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-04-04
vue項(xiàng)目展示pdf文件的方法實(shí)現(xiàn)
本文主要介紹了vue項(xiàng)目展示pdf文件的方法實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
如果我們?cè)诿總€(gè)組件中去重復(fù)定義這些屬性和方法會(huì)使得項(xiàng)目出現(xiàn)代碼冗余并提高了維護(hù)難度，針對(duì)這種情況官方提供了Mixins特性，這時(shí)使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧2023-02-02
element-ui中this.$confirm提示文字中部分有顏色自定義方法
this.$confirm是一個(gè)Vue.js中的彈窗組件,其樣式可以通過(guò)CSS進(jìn)行自定義,下面這篇文章主要給大家介紹了關(guān)于element-ui中this.$confirm提示文字中部分有顏色的自定義方法,需要的朋友可以參考下2024-02-02
ant-design-vue中的select選擇器,對(duì)輸入值的進(jìn)行篩選操作
這篇文章主要介紹了ant-design-vue中的select選擇器,對(duì)輸入值的進(jìn)行篩選操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
基于Vue 2.0 監(jiān)聽文本框內(nèi)容變化及ref的使用說(shuō)明介紹
今天小編就為大家分享一篇基于Vue 2.0 監(jiān)聽文本框內(nèi)容變化及ref的使用說(shuō)明介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
組件是有name屬性的,匹配的就是組件的name,下面這篇文章主要給大家介紹了關(guān)于vue中組件的name屬性含義和用法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12