vue中数据更新视图不更新的问题

Posted 2021-02-11 shysun

遇到这样一个问题, 代码如下:

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])

})