vue中數據更新視圖不更新的問題

遇到這樣一個問題, 代碼如下:

this.memberLevelList.forEach(item => {

　　item.levelDate = [item.startTime, item.endTime];

})

startTime和endTime是從后台獲取的數據, 但是模板中需要levelDate, 於是直接賦值,

最后打印的memberLevelList結果中也有levelDate的數據, 但是頁面上始終不渲染;

 

看了一下memberLevelList的observer(觀察者), 發現並沒有levelDate這個數據;

原因: 

Vue不能檢測3種情況下的數組變動:

1. 通過數組的索引修改他的值,
2. 修改數組的length;

3. 監測不到data中未定義的值

 

解決辦法: Vue.set手動更新

this.memberLevelList.forEach(item => {

　　this.$set(item, 'levelDate', [item.startTime, item.endTime])

})