element-ui报错Cannot read property 'resetFields' of undefined

最新推荐文章于 2023-09-08 17:41:07 发布
最新推荐文章于 2023-09-08 17:41:07 发布
阅读量2.2w 收藏 7
点赞数 8
CC 4.0 BY-SA版权
分类专栏： element-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_33769914/article/details/82868745
本文解决了一个常见的Vue.js开发问题：在点击事件处理函数中调用resetFields方法时遇到TypeError错误，原因是DOM元素尚未完全加载。通过使用$nextTick方法，可以确保在DOM更新后执行resetFields，从而避免此错误。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'resetFields' of undefined"

这个错误是因为你的dom元素还没有加载完，你就想使用resetFields置空。也就是你写的this.$refs['addForm'].resetFields();这个里面的addForm还没有加载出来呢。

解决：

this.$nextTick(()=>{

   this.$refs['addForm'].resetFields();

})

 

Vue+elementUI开发中报错：Cannot read property ‘resetFields‘ of undefined
yqx_123的博客
10-15 1077
项目场景： 今天在写项目时，想要给添加按钮弹出的模态框添加一个表单验证功能，然后去Element-ui上找到了表单验证的代码，成功的使用了。效果是这样的： 然后我是把添加和修改使用的一个模态框，这时候我发现当我在已有的数据上点修改的时候，弹出的模态框这个校验信息还在， 于是我就去官网看文档找一个清空校验的方法，当我点修改按钮的时候先清除这个表单的校验。然后也成功的达到我想要的效果，但是当我刷新了一下页面再点修改的时候控制台突然报错了：Cannot read property ‘resetFields’
element-ui 报错Cannot read property ‘setCheckedKeys‘ of undefined“
ych6666的博客
01-11 1372
el-tree的一些坑 过程是这样的 1.首先我将el-tree封装为一个公用组件：myTree 然后在另一组件中注册使用 <my-tree ref="myTree" :show-checkbox="true" :tree-data="tableTreeData" :node-key="id" @currentChecked="currentChecked"/> </my-tree> 2.此时，我准备清空树中所有勾选的ch
Cannot read property ‘resetFields‘ of undefined
weixin_46949892的博客
09-08 357
2.table表单中缺少prop的item还会引起js报错。1. mouted加载table数据以后，隐藏的。引起原因：多个弹框使用同一个页面。并没有编译渲染进dom里面。检查所有项，加入prop即可。
Cannot read property ‘resetFields‘ of undefined 问题及解决方法
hlpp123的博客
04-18 2792
Cannot read property 'resetFields' of undefined 问题及解决方法 问题描述： 使用element开发我的后台系统，编辑和新增使用了同一个弹出框<el-dialog><el-form></el-form></el-dialog> 绑定了数据data里的form对象 为了在新增弹出框清空表单, 使用了this.$refs[formName].resetFields() 每次第一次点击新增显示弹出框，都会报如下错误.
vue summary-method 报错 Cannot read property '0' of undefined"
最新发布
06-25
针对 Vue 中使用 Element UI 表格的 `summary-method` 报错 `Cannot read property '0' of undefined` 问题，以下是完整的解决方案： ### 错误原因分析 该错误通常由以下原因引起： 1. **汇总函数未返回有效数组**...
使用elementUI中的el-checkbox遇上Cannot read property ‘length‘ of undefined错误应该怎么办？
luoteen的博客
03-02 1万+
在使用el-checkbox时遇上这样的错误： TypeError: Cannot read property ‘length’ of undefined at VueComponent.isLimitDisabled (element-ui.common.js?ccbf:6452) at Watcher.get (vue.esm.js?efeb:4482) at Watcher.evaluate...
在element-ui的dialog弹框中使用echarts报错，不能出现图表TypeError: Cannot read property ‘getAttribute‘ of undefined
丑小鸭变黑天鹅的博客
09-01 2394
TypeError: Cannot read property 'getAttribute' of undefined问题描述分析原因解决办法 问题描述 最近在写一个vue项目，用的是element-ui框架，其中一个业务需求需要点击之后弹出一个dialog框，然后在这个框里进行渲染绑定的echarts。操作步骤没问题，和以往的操作一样，先是安装echarts使用 npm install echarts@4.8.0 --save 然后再main.js文件中引入并挂载到全局中 // 引入echarts im
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
此外，文章还提及了一个相关问题，即在使用`resetFields()`时可能出现的`TypeError: Cannot read property 'resetFields' of undefined`错误。这通常是由于在`el-form`的`ref`引用未准备好时就尝试调用`resetFields...
【解决报错】Error in v-on handler: “TypeError: Cannot read property ‘resetFields’ of undefined”
热门推荐
栀妹儿的炼丹炉
04-22 2万+
vue项目用elm框架写表单 在新增的时候一般要让数据清空this.$refs['form'].resetFields(); 但是在页面加载进来的时候还没有渲染dom元素 所以直接点新增会报错： Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'resetFields')" 解决方案： 1、加判断 if(this.$refs['form'] !== undefined) { this.$r
TypeError: Cannot read property ‘resetFields‘ of undefined解决方案
辰兮要努力
04-10 1万+
【辰兮要努力】：hello你好我是辰兮，很高兴你能来阅读，昵称是希望自己能不断精进，向着优秀程序员前行！ 博客来源于项目以及编程中遇到的问题总结，偶尔会有读书分享，我会陆续更新Java前端、后台、数据库、项目案例等相关知识点总结，感谢你的阅读和关注，希望我的博客能帮助到更多的人，分享获取新知，大家一起进步! 吾等采石之人，应怀大教堂之心，愿你们奔赴在各自的热爱中… 文章目录一、业务场景二、拓展补充 一、业务场景 业务场景：最近Vue+ElementUI项目，遇到弹框清空表单报错，自己在做表单校验的.
TypeError: Cannot read property 'indexOf' of undefined at VueComponent.resetField
river、的博客
09-05 1万+
本文首发于 语雀 在这个复用的弹出框中，有时操作成功后会在控制台报一个这样的错误： 百思不解，直到在报错信息中点击 element-ui.common.js?5c96:17242 后看到这一行： 再结合报错信息，我们可以得知，应该是我们每个 el-form-item 标签的 prop 属性有问题。果然，存在一个没有传入 prop 属性。 ...
弹出对话框表单重置问题 “TypeError: Cannot read property ‘resetFields’ of undefined”
qq_44802808的博客
04-14 760
有一个新增功能，需要点击后弹出对话框并重置表单，本来是直接在那个功能中添加了重置方法 但会报如下的错误 起初一直想不明白，以为新增和对话框表单是独立的，所以获取不到，但是this.refs就可以获取到所有的表单实例∗∗原因∗∗：查阅之后，才知道这样报错，是因为数据加载的时候，隐藏的弹出框并没有渲染进dom里面，所以refs就可以获取到所有的表单实例 **原因**：查阅之后，才知道这样报错，是因为数据加载的时候，隐藏的弹出框并没有渲染进dom里面，所以refs就可以获取到所有的表单实例∗∗原因∗∗：查阅之
element-ui报错Cannot read property ‘resetFields‘ of undefined
吴冬雪的博客
04-11 2831
问题描述： 使用element开发我的后台系统，编辑和新增使用了同一个弹出框绑定了数据data里的commentForm对象为了在新增弹出框清空表单, 使用了每次第一次点击新增显示弹出框，都会报错。
Cannot read property 'resetFields' of undefined 问题及引申
weixin_38166931的博客
07-05 1024
问题描述： 使用element开发我的后台系统，编辑和新增使用了同一个弹出框<el-dialog><el-form></el-form></el-dialog> 绑定了数据data里的commentForm对象 为了在新增弹出框清空表单, 使用了this.$refs[formName].resetFields() 每次第一次点击新增显示弹...
Vue+elementUI开发中 Cannot read property ‘resetFields‘ of undefined 问题解决以及原因分析
xiaoququ的博客
09-02 576
有个添加数据与编辑数据的功能。为了减少代码量，两者使用了同一个dialog，通过不同按钮点击使用对应的方案进行显示。 在添加数据的按钮的click事件中直接写入了resetFields。 之后正常运行过一段时间，但是就在最近（添加了很多代码）开始报错： TypeError: Cannot read property ‘resetFields’ of undefined 同时我发现，只要显示过一次dialog，后面就不会报错了。所以我可以确定是因为代码量过大，对应的对象来不及生成，从而导致了读取了空对象。 所
Cannot read properties of undefined (reading ‘resetFields‘)“
embelfe_segge的博客
03-03 2516
form表单自带resetFields重置与validate验证报错 Cannot read properties of undefined (reading ‘resetFields’)" Cannot read properties of undefined (reading ‘validate’)" 1、语法是否正确 //重置表单 this.$ refs.searchForm.resetFields() 或 this.$ refs[‘searchForm’].resetFields() //表单验证
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值