我們有時候常碰到vue中明明修改了數(shù)據(jù)，但是視圖無法更新，因此我總結(jié)了一點點碰到此類的情況：
1、v-for遍歷的數(shù)組，當(dāng)數(shù)組內(nèi)容使用的是arr[0].xx =xx更改數(shù)據(jù)，vue無法監(jiān)測到
數(shù)組數(shù)據(jù)變動：我們使用某些方法操作數(shù)組，變動數(shù)據(jù)時，有些方法無法被vue監(jiān)測，有些可以
Vue包裝了數(shù)個數(shù)組操作函數(shù)，使用這些方法操作的數(shù)組去，其數(shù)據(jù)變動時會被vue監(jiān)測：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
vue2.0還增加個方法可以觀測Vue.set(items, indexOfItem, newValue)
filter(), concat(), slice() 。這些不會改變原始數(shù)組，但總是返回一個新數(shù)組。當(dāng)使用非變異方法時，可以用新數(shù)組替換舊數(shù)組
Vue 不能檢測以下變動的數(shù)組：
① 當(dāng)你利用索引直接設(shè)置一個項時，vm.items[indexOfItem] = newValue
② 當(dāng)你修改數(shù)組的長度時，例如： vm.items.length = newLength
話不多說，上代碼,并且附上效果圖：
<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)點擊事件觸發(fā)時候會修改掉gc[0]的值為lisi,但是視圖不會發(fā)生變化
add(){
this.gc[0] ={name:'lisi',age:22}
}
}
})
</script>
</body>
以上Vue 不能檢測數(shù)據(jù)變動的數(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ù)但視圖無法更新的情況就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權(quán)所有
違法及侵權(quán)請聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
