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>