vue 数组在数据更新后组件视图不更新

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

参考文章: vue中强制组件重新渲染的正确方法


版权声明:本文为weixin_42794873原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。