在使用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 去添加