遇到这种报错 先去相关页面搜索关键字 定位到具体的报错代码
Cannot read properties of undefined (reading ‘resetFields’)"
关键字:resetFields
此方法作用:对整个表单进行重置 将所有字段值重置为初始值并移除校验结果
报错场景:点击编辑按钮 弹窗弹出时 控制台报错
init(id) {
this.visible = true
this.$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>