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

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

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

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

原因：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请求 获取数据反显到表单上
			}
		})				
	},		
1
2
3
4
5
6
7
8
9

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

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

另外还有一种报错情况 编辑弹窗打开后 某项数据明明有值 却报必填校验错误
控制台：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>
1
2
3
4
5

同改为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>
1
2
3
4
5