@vue resetFields 失效问题
vue resetFields不起作用
问题
由于新增、编辑、查看弹框表单用的同一个表单,但打开编辑或查看表单并关闭后,再打开新增表单,发现表单有之前的数据,resetFields失效。
分析
后查看官方文档,发现,resetFields只是对整个表单进行重置,将所有字段重置为初始值并移除校验结果,当打开编辑表单后,表单字段初始值就为编辑获取到的值,此时resetFields就是将表单字段重置为初始值,就是编辑表单获取到的值;
解决办法
eg:
vue
<el-dialog @close=“handleClose(‘userForm’)”>
<el-input v-model="userForm.name>
…
…
表单 userForm = {
name: “”,
age: “”,
}
关闭弹框方法里写:
handleClose(formName) {
let resetForm = {
name: “”,
age: “”,
}
this[formName] = resetForm;//清空表单
this.$refs[formName]
.resetFields();//移除校验结果
。。。。再写关闭弹框等其他方法。。。
}
PS:表单中prop与v-model变量要一一对应