弹出对话框表单重置问题 “TypeError: Cannot read property ‘resetFields’ of undefined”

最新推荐文章于 2023-05-24 13:41:07 发布
最新推荐文章于 2023-05-24 13:41:07 发布
阅读量634 收藏 3
点赞数 1
分类专栏： 项目分析
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44802808/article/details/115689865
版权

有一个新增功能，需要点击后弹出对话框并重置表单，本来是直接在那个功能中添加了重置方法
在这里插入图片描述
但会报如下的错误
在这里插入图片描述
起初一直想不明白，以为新增和对话框表单是独立的，所以获取不到，但是this.$refs就可以获取到所有的表单实例

原因：查阅之后，才知道这样报错，是因为数据加载的时候，隐藏的弹出框并没有渲染进dom里面，所以$refs并没有获取到dom元素
解决办法：就是将这个重置方法变为异步，让它等到dom渲染完再加载就可以解决这个问题了
在这里插入图片描述

小星星星★
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Sawyer-zh#study-note#Vue-js路由报错TypeError-Cannot-read-property-c-
07-25
title: 'Vue.js路由报错:TypeError: Cannot read property ''_c'' of undefined'错误详情：像上面这
ASP.NET MVC运行出现Uncaught TypeError: Cannot set property __MVC_FormValidation of null的解决方法
10-29
同一相站点，有些页面的客户端验证能工作，而有些死活不行。打开页面就出现Uncaught TypeError: Cannot set property __MVC_FormValidation of null错误
TypeError: Cannot read property ‘resetFields‘ of undefined解决方案
辰兮要努力
04-10 1万+
【辰兮要努力】：hello你好我是辰兮，很高兴你能来阅读，昵称是希望自己能不断精进，向着优秀程序员前行！ 博客来源于项目以及编程中遇到的问题总结，偶尔会有读书分享，我会陆续更新Java前端、后台、数据库、项目案例等相关知识点总结，感谢你的阅读和关注，希望我的博客能帮助到更多的人，分享获取新知，大家一起进步! 吾等采石之人，应怀大教堂之心，愿你们奔赴在各自的热爱中… 文章目录一、业务场景二、拓展补充 一、业务场景 业务场景：最近Vue+ElementUI项目，遇到弹框清空表单报错，自己在做表单校验的.
【解决报错】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
element-ui报错Cannot read property 'resetFields' of undefined
weixin_41831623的博客
04-25 224
element-ui报错Cannot read property 'resetFields' of undefined resetForm(formname){ // 此处传入的是值名的字符串，非值本身 if(this.$refs[formname] !== undefined){ this.$refs[formname].resetFields() } } 要注意这里传入的...
踩坑系列-VUE的表单重置-报错：TypeError: Cannot read property ‘resetFields‘ of undefined“
invalid_oath的博客
09-09 1707
一. 背景 最近写的一个后台管理的时候需要对密码以及手机号进行修改，但是我想在修改手机号或者密码的对话框关闭的同时，将表单数据和验证规则清空，达到比较好的体验效果。 二. 寻找原因 起初我使用的是resetFields将重置，（注意： resetFields 作用不是清空表单，而是将所有字段值重置为初始值）。但是呢，写出来的代码出现"TypeError: Cannot read property ‘resetFields’ of undefined"的错误。我找了一下，引用网上的原因：这个错误是因为你的do
使用了弹窗和i18n出现Error in render: “TypeError: Cannot read property ‘_t‘ of undefined“的解决方案
weixin_42077503的博客
06-25 870
首先要确保在main.js里面把vue挂在在window.vm下（vm这个名字可以自定义） window.vm = new Vue({ el: '#app', i18n, router, store, render: h => h(App) }) 其次，在弹出框中写多语言时需要加上vm. 比如平时在写多语言时是写{{$t('xxxxx')}} 或 this.$t('xxx') 这时就需要写{{vm.$t('xxxxx')}} 或 this.vm.$t('xxxxx') ...
Vue打包Cannot read property 'tapPromise' of undefined报错处理.docx
01-21
ERROR TypeError: Cannot read property 'tapPromise' of undefined TypeError: Cannot read property 'tapPromise' of undefined at /data/rondir/jenkins/workspace/iot-core-web-test/node_modules/compression-...
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#Object‘的解决方法
12-09
当你遇到“Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'”这样的错误，通常是因为在同一个模块中混用了CommonJS（`require`和`module.exports`）和ES6模块（`import`...
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#&lt;Object&gt;‘的解决
08-30
在Vue开发过程中，有时会遇到一个常见的错误：`Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'`。这个错误通常发生在使用Webpack打包Vue应用时，由于模块导入导出规范的...
TypeError: Cannot read property 'resetUpScroll' of null
风花一世月
03-29 755
在onshow中使用mescroll-body组件this.mescroll.resetUpScroll()方法会报错，延迟50秒会正常 这个报错通常是由于在onShow生命周期中访问某些组件的属性或方法时，这些组件尚未完全初始化所导致的。 延迟50毫秒后调用resetUpScroll方法可能是因为这样做可以让组件有足够的时间进行初始化，从而避免了出现这个错误。 在onShow生命周期中，如果你...
Vue+elementUI开发中 Cannot read property 'resetFields' of undefined 问题解决以及原因分析...
weixin_34186931的博客
10-24 1582
本人开发的系统中有个添加数据与编辑数据的功能。为了减少代码量，两者使用了同一个dialog，通过不同按钮点击使用对应的方案进行显示。 对了方便，本人在添加数据的按钮的click事件中直接写入了resetFields。 之后正常运行过一段时间，但是就在最近（添加了很多代码）开始报错： TypeError: Cannot read property 'resetFields' of undefi...
前端进入页面时滚动到指定位置Cannot read property ‘scrollIntoView‘ of null问题
weixin_44099060的博客
04-25 2784
需求：从A页面进入B页面，窗口停在B页指定面id位置
Cannot read property 'callbackdata' of undefined
sinat_38020023的博客
06-06 1576
写了个layer.open,想从子页面返回数据到前台，然后找了找百度，全是这样的复制粘贴的文章： 获取layer.open弹出层的返回值 里面用的是 var res = window["layui-layer-iframe" + index].callbackdata(); 然而却是报错Cannot read property 'callbackdata' of undefined ...
Cannot read properties of undefined (reading ‘resetFields‘)问题及引申
????鱼干～
07-18 2万+
报错Cannot read properties of undefined (reading 'resetFields')
【每日BUG】解决Cannot read properties of undefined (reading ‘resetFields‘)
yyp_abcd的博客
05-24 4832
在弹窗里使用form表单时，重置使用this.$refs.form.resetFields()会报Cannot read properties of undefined (reading ‘resetFields’)的原因以及处理方法
TypeError: Cannot read property 'xxxx' of undefined的解决方法
热门推荐
静幽水
10-12 9万+
TypeError: Cannot read property ‘length’ of undefined
Cannot read property ‘resetFields‘ of undefined 问题及解决方法
hlpp123的博客
04-18 2675
Cannot read property 'resetFields' of undefined 问题及解决方法 问题描述： 使用element开发我的后台系统，编辑和新增使用了同一个弹出框<el-dialog><el-form></el-form></el-dialog> 绑定了数据data里的form对象 为了在新增弹出框清空表单, 使用了this.$refs[formName].resetFields() 每次第一次点击新增显示弹出框，都会报如下错误.
[解决]“TypeError: Cannot read property ‘xxx‘ of undefined“
m0_64838460的博客
11-18 1万+
错误解决。
[ArkRuntime Log] TypeError: Cannot read property sayHello of undefined
最新发布
04-02
这个错误是由于尝试在未定义的对象上访问属性而引起的。具体来说，错误信息中提到的"TypeError: Cannot read property sayHello of undefined"表示无法读取未定义对象的sayHello属性。 要解决这个问题，你需要确保在访问对象的属性之前，该对象已经被正确地定义和初始化。检查一下你的代码，看看是否有地方没有正确地初始化对象或者在使用对象之前没有进行必要的检查。 如果你能提供更多的上下文或代码片段，我可以给出更具体的建议。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值