Cannot read properties of undefined (reading ‘resetFields‘)“ 报错解决

在这里插入图片描述
遇到这种报错先去相关页面搜索关键字定位到具体的报错代码
Cannot read properties of undefined (reading ‘resetFields’)"
关键字：resetFields
此方法作用：对整个表单进行重置将所有字段值重置为初始值并移除校验结果

报错场景：点击编辑按钮弹窗弹出时控制台报错

	init(id) {this.visible = truethis.$refs['dataForm'].resetFields()if(id) {// 发送axios请求 获取数据反显到表单上}},

原因：this.$refs['dataForm'].resetFields()在执行的时候表单的dom还没有渲染出来
因为还没渲染出所以用$refs调用名叫‘dataForm’身上的resetFields方法是undefined

解决方法：使用$nextTick包上等待dom更新之后再重置

	init(id) {				this.visible = true				this.$nextTick(() => {this.$refs['dataForm'].resetFields()if(id) {// 发送axios请求 获取数据反显到表单上}})				},

也可以先判断确认能获取到dataForm再重置

if (this.$refs.dataForm != undefined){this.$refs["dataForm"].resetFields();}

另外还有一种报错情况编辑弹窗打开后某项数据明明有值却报必填校验错误
控制台：xxx is required
在这里插入图片描述
这种情况大概率是当前数据项 input里的v-model和el-form-item上的prop绑定的值不一致

<el-col :span="12"><el-form-item label="数据项" prop="dataItems"><el-input clearable v-model="dataForm.dataItem" placeholder="数据项"></el-input></el-form-item>
</el-col>

同改为dataItem即可

<el-col :span="12"><el-form-item label="数据项" prop="dataItem"><el-input clearable v-model="dataForm.dataItem" placeholder="数据项"></el-input></el-form-item>
</el-col>