Vue數據更新，視圖不更新問題

 

寫點贊功能時，點贊后已經追加到對象里了，但是視圖沒有更新。

 

 

 

 

查找了些資料：

數據已經更新了但是視圖不更新的問題，有幾個原因：

1、根屬性不存在，而想要直接給根屬性賦值導致的視圖不更新。此時初始化屬性的時候給根屬性初始化一個空值就可以了。

2、只有通過以下幾個方法更新數組

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

vue才能檢測到數組更新。如果想直接通過下標修改數組的話，就需要使用vm-set 方法來通知vue你更新了這個數組。

語法為：

vm.$set( target, key, value )

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

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

this.obj = Object.assign({}, this.obj)

this.obj = Object.assign({}, this.obj,{'k1','v1'})

 

對象添加可以使用：

this.$set(對象名,屬性,值)

 

 

-----------------------------------------------2019/3/22更新-----------------------------------------

//這塊思路 因為得異步更新，點贊后單獨更新這一條
//vue數據更新后 同步更新視圖 對於對象來說要用Vue.set這種寫法
//先把用戶點贊的 moment_id存進對象，{51:true,60:true,...},
//判斷對象中的屬性，v-if="zan_obj[item.id]" 為true就亮紅心，用過濾器使點贊數值+1
//下拉刷新時，清空此對象，此時使用數據庫中的點贊狀態數據
Vue.set(vm.zan_obj,mom_,true);