解決vue中修改了數(shù)據(jù)但視圖無法更新的情況

第解決vue中修改了數(shù)據(jù)但視圖無法更新的情況我們有時(shí)候常碰到vue中明明修改了數(shù)據(jù)，但是視圖無法更新，因此我總結(jié)了一點(diǎn)點(diǎn)碰到此類的情況：

1、v-for遍歷的數(shù)組，當(dāng)數(shù)組內(nèi)容使用的是arr[0].xx=xx更改數(shù)據(jù)，vue無法監(jiān)測到

數(shù)組數(shù)據(jù)變動(dòng)：我們使用某些方法操作數(shù)組，變動(dòng)數(shù)據(jù)時(shí)，有些方法無法被vue監(jiān)測，有些可以

Vue包裝了數(shù)個(gè)數(shù)組操作函數(shù)，使用這些方法操作的數(shù)組去，其數(shù)據(jù)變動(dòng)時(shí)會被vue監(jiān)測：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

vue2.0還增加個(gè)方法可以觀測Vue.set(items,indexOfItem,newValue)

filter(),concat(),slice()。這些不會改變原始數(shù)組，但總是返回一個(gè)新數(shù)組。當(dāng)使用非變異方法時(shí)，可以用新數(shù)組替換舊數(shù)組

Vue不能檢測以下變動(dòng)的數(shù)組：

①當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，vm.items[indexOfItem]=newValue

②當(dāng)你修改數(shù)組的長度時(shí)，例如：vm.items.length=newLength

話不多說，上代碼,并且附上效果圖：

body

divid="app"

liv-for="(item,index)ingc"

span{{}}-{{index}}/span

span{{item.age}}-{{index}}/span

/li

/ul

button@click="add"click/button

/div

script

newVue({

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í)候會修改掉gc[0]的值為lisi,但是視圖不會發(fā)生變化

add(){

this.gc[0]={name:'lisi',age:22}

/script

/body

以上Vue不能檢測數(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)控到，更新視圖

}