ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

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

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>
返回列表