1. 程式人生 > >vue資料繫結陣列,改變元素時不更新view問題

vue資料繫結陣列,改變元素時不更新view問題

關於這個問題,官網上說的很清楚官方文件 12

寫個例子HTML<body> <div class="box"> <div v-for="aa in aas">{{aa}}</div> <button @click="change">變資料 </button> </div></body>

jsvar vm = new Vue({ el:".box", data:{ aas:["ss","ddd","fff","bbb"]

}, methods:{      change(){      // 點選按鈕時,改變aas的最後一個元素,      // 資料變了 但是view沒有更新      this.aas[3] = 444;    }  } })

為什麼因為vue實現雙向資料繫結的機制是資料劫持,也就是在所有物件上有個Object.defineProperty()方法,通過監聽set,get方法去實現,而陣列沒有這兩個方法,所以就不會更新

view;解決方案就是,需要我們主動通知vue;

解決方案1 methods:{    change(){    this.aas[3] = 444;

    // 在vm例項上通知    vm.$set(this.aas,3,this.aas[3])  }}解決方案2 methods:{    change(){    this.aas[3] = 444;    // 在全域性物件上通知    Vue.set(this.aas,3,this.aas[3])  }}解決方案3 methods:{  change(){    // vue本身可以監聽到陣列的一些方法,例如:    // push(),pop(),shift(),unshift(),splice(),sort(),reverse()    this.aas.splice(3,1,"444");  }
}