vue项目，多层数据嵌套，底层数据更新，页面无法更新

做一个项目，就是那种套了三四层数据的数据结构，当我改变最底层的数据时，数据都改变好了，页面没有实时更新。
众所周知，就是因为vue2不能监听到没有在data里面就定义好的数据，所以，当改变数组和对象的值时，视图层不能实时更新。

我用到的大概就这样子的数据结构：

大概模拟下：

obj:{name:"xxx",age:"18",units:[{id:"123",datas:[{color:"red",title:"新闻1",class:"三班"},{color:"pink",title:"新闻2",class:"三班"}{color:"yellow",title:"新闻3",class:"三班"}]},{id:"456",datas:[{color:"red",title:"新闻1",class:"三班"},{color:"pink",title:"新闻2",class:"三班"}{color:"yellow",title:"新闻3",class:"三班"}]}]
}

当我替换datas里面的任意一个对象护着对象里面的属性时，数据发生变更，视图没有响应。
尝试了vue.set方法，也尝试了所说的强制更新this.$forceUpdate();好像是没啥卵用。有看到有个博主说是用v-if控制条件的变动来渲染组件或者页面。好像有的场景不太能用。

最终解决方案：
给obj动态添加一个每次都变动的属性(给它搞个随机数)，然后你下层的数据只要更新，视图就是会更新。

重点代码如下：

注意：代码中的id和index是我循环用到的索引，你可以暂时替换为你指定的索引尝试下。

      this.$nextTick(() => {//添加变动的属性给第一层的对象，至关重要this.$set(this.obj,Math.random(),Math.random()  );//修改最下层的datas中的对象。this.obj.units[i].datas[index] = Object.assign({},  this.obj.units[i].datas[index], {color:"blue",title:"宫格1",class:"五班"})});

希望对你有帮助~

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！