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])
})
 
posted on 2019-03-03 15:37  shysun  阅读(1839)  评论(0编辑  收藏  举报