在项目中遇到用户修改表单时提供重置按钮,重置后会将表单内容重置回初始值。
在点击重置按钮后普通的表单组件都可以重置成功,但有2个组件无法重置成功。
1. 为我的自定义组件,在新增项的时候改为使用$set即可解决问题
// 增加列表项
addItem() {
let obj = {
name: '',
url: ''
}
this.$set(this.formItem.itemList, this.formItem.itemList.length, obj)
},
// 注意在给数组重新赋值时要使用深拷贝,不能直接用=赋值
// return JSON.parse(JSON.stringify(arr))
- 为项目使用的组件库中上传文件的组件,在绑定的文件列表和默认文件列表数据都修改后,视图未修改。此时需要让此组件重新渲染,此时通过使用key值来触发组件重新渲染。
- 补充后续:后来发现没能及时更新是因为数据未进行深拷贝,将对应数据使用深拷贝后同样可以解决问题。
参考文章: vue中强制组件重新渲染的正确方法
版权声明:本文为weixin_42794873原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。