Vue resetFields之后表单不生效的问题

Luna

编程前端Vue

发布于：Jul 1, 2021

次浏览

  最近用ElementUI写一个表单的时候，新增和修改用了同一个表单。那么修改的时候就会有个回填数据，在关闭表单之后需要被清除。我用了this.$refs.addForm.resetFields();，然而关闭表单之后，我列表里的对应修改项的这一条数据也被清空了。原来这是因为JS浅拷贝的问题。

  我的列表数据是tableData，表单数据用的是addForm，当我把表单数据赋值给列表项时，用的是：

1

this.$set(this.tableData,this.index,this.addForm);

  这就导致了我把addForm的地址赋给了tableData中对应索引的数据项，那么当我用

1

this.$refs.addForm.resetFields();

  清空表单的时候，列表的数据项也被清空了。

  正确的方法是使用解构：

1

this.$set(this.tableData,this.index,{...this.addForm});

  问题就解决了。

更新于：Jul 1, 2021

Vue