做一个项目,就是那种套了三四层数据的数据结构,当我改变最底层的数据时,数据都改变好了,页面没有实时更新。
众所周知,就是因为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:"五班"})
                });

希望对你有帮助~

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐