解決vue中對象屬性改變視圖不更新的問題


在使用VUE的過程中,會遇到這樣一種情況, vue data 中的數據更新后,視圖沒有自動更新。

這個情況一般分為兩種,

一種是數組的值改變,在改變數組的值的是時候使用索引值去更改某一項,這樣視圖不會實時更新

第二種情況是改變了對象的某一項,但是其他依賴這個數據的視圖沒更新

第一種情況是因為直接通過索引去改變數組,vue 對象監聽不到他的變化 所以沒有更新。

----解決方法  1. Vue.set(example1.items[0], { childMsg: 'Changed!'})

      2.使用Vue的變異方法 pop() push() shift() unshift() revese() sort() splice() 也會觸發視圖更新

 

第二種情況是修改對象的屬性,比如父組件和子組件公用一份數據,數據通過props傳到子組件,在子組件中修改數據父組件中不會響應。

方案一:利用Vue.set(object,key,val)

例:Vue.set(vm.obj,'k1','v1')

方案二:利用this.$set(this.obj,key,val)

例:this.$set(this.obj,'k1','v1')

方案三:利用Object.assign({},this.obj)創建新對象

方案四:可以先刪除掉該項,然后再使用set 去添加


免責聲明!

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



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