vue數據綁定數組,改變元素時不更新view問題


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

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


js
var 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,444)
  }
}
解決方案2
methods:{
    change(){
    this.aas[3] = 444;
    // 在全局對象上通知
    Vue.set(this.aas,3,444)
  }
}
解決方案3
methods:{
  change(){
    // vue本身可以監聽到數組的一些方法,例如:
    // push(),pop(),shift(),unshift(),splice(),sort(),reverse()
    this.aas.splice(3,1,"444");
  }
}

 
       


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM