vue資料繫結陣列,改變元素時不更新view問題
阿新 • • 發佈:2018-12-10
關於這個問題,官網上說的很清楚官方文件
寫個例子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"]
為什麼因為vue實現雙向資料繫結的機制是資料劫持,也就是在所有物件上有個Object.defineProperty()方法,通過監聽set,get方法去實現,而陣列沒有這兩個方法,所以就不會更新
view;解決方案就是,需要我們主動通知vue;
解決方案1 methods:{ change(){ this.aas[3] = 444;