vue项目,多层数据嵌套,底层数据更新,页面无法更新
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/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:"五班"})
});
希望对你有帮助~
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 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)