解决Vue中Element resetFields()重置表单不生效的问题（含Cannot read property ‘resetFields‘ of undefined问题解决）

问题背景：

在已经遵照Element官网给出的 resetFields 使用方法情况下，resetFields 方法仍无法生效

首先先来梳理一下Element官方文档中给出的 resetFields 方法的使用条件：

也就是说，想要使用 resetFields 需要满足：

1. 给el-form-item添加 prop 属性
2. 为了重置表单需要添加 ref 属性，ref属性需要与$ref['form']中名称一致

原始代码：

 按如上代码，我既添加了ref又添加了prop，如果 resetFields() 方法生效后应该会将表单中的值重置为图三所设置的初始值，但是结果并没有重置...（我emo了....）

解决方法：

于是我思来想去决定把这个监听事件换个地方绑定！

我将这个监听事件绑定到了准备开始弹出弹框时的方法中：

虽然表单可以实现重置了，不过浏览器弹出了以下错误：

Cannot read property ‘resetFields‘ of undefined

 分析：

undefined 表示一个变量未定义或未赋值的初始状态值，我认为弹出这个错误大概是因为第一次点击弹框的时候弹框内本来就是初始值，并不需要 reset，所以可以在使用 resetFields 之前增加一个判断条件，代码如下：

 最后，果然不报错了！！而且重置表单也可以正常生效了！！！

所以如果有和我情况一致的uu也可以试试我这种方法噢

标签：Vue,undefined,resetFields,重置,表单,Element,ref
来源： https://blog.csdn.net/unlilalila/article/details/121544967