【Vue进阶】双向绑定视图不更新,$set()失效的解决方法
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
前言
现状: 在开发的过程中,我们经常遇到数据更新后,而视图不更新的情况,有的使用this.$set()
就能解决,然而有的即使用了this.$set()
视图也不更新。
特此记录下处理“数据更新后而视图不更新”问题的解决方法。
一、使用深度监听
如果是父子组件间通过props传值的话,先尝试使用深度监听。
watch: {
rowData: {
handler(val) {
console.log(val)
},
deep: true,
immediate: true
}
},
二、使用this.$set()
1、使用this.$set()改变内容
如果是数组对象赋值,使用this.$set()改变数组对象中的内容。
const systemList = [{ id: '1', name: '系统1' }, { id: '2', name: '系统2' }]
this.$set(this.form, 'systemList', systemList)
2、先删除再重新赋值
如果使用this.$set()视图还是不更新的话,先删除再重新赋值。
this.$delete(this.form, 'systemList')
const systemList = [{ id: '1', name: '系统1' }, { id: '2', name: '系统2' }]
this.$set(this.form, 'systemList', systemList)
3、强制更新视图
如果视图还是不更新的话,赋值后强制更新视图。
const systemList = [{ id: '1', name: '系统1' }, { id: '2', name: '系统2' }]
this.$set(this.form, 'systemList', systemList)
this.$forceUpdate()
4、key增加时间戳
如果涉及到循环,使用上述方法视图不更新的话,在循环时给key增加时间戳。
<div v-for="(item, i) in form.systemList" :key="item.id + Date.now()">
{{ item.name }}
</div>
PS:如果使用上述的单个方法,视图不更新的话,可以尝试多种方法结合使用哦~
总结
【Vue进阶】系列文章持续更新中……
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
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> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)