记录：Vue中在dialog使用resetFields()失效

H542425661

已于 2024-02-20 09:38:31 修改

阅读量468

点赞数 6

文章标签： vue.js 前端 javascript

于 2024-02-20 09:31:43 首次发布

本文链接：https://blog.csdn.net/H542425661/article/details/136182483

版权

文章讨论了在Vue组件中，当使用`resetFields()`方法重置表单时遇到的问题，因为可能在DOM尚未加载完毕时执行，导致无效。作者建议在DOM加载完成后使用`nextTick()`函数确保正确赋值。

摘要由CSDN通过智能技术生成

resetFields()失效

点击编辑时，visible.value = true 后就会对form进行赋值，此时DOM还未加载完成。你的初始值就变成了编辑传递过来的值，所以调用 menuRef.value?.resetFields()无效

修改后

调用nextTick()，等DOM加载完成之后再去赋值

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

H542425661

关注关注

6
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

elemenui el-dialog中el-form表单的resetFields失效问题

白也白

07-07

1058

elemenui el-dialog中el-form表单的resetFields失效问题

解决Vue中Element resetFields()重置表单不生效的问题（含Cannot read property ‘resetFields‘ of undefined问题解决）

热门推荐

unlilalila的博客

11-25

2万+

解决Vue中Element resetFields()重置表单不生效的问题，解决Cannot read property ‘resetFields‘ of undefined问题

参与评论您还未登录，请先登录后发表或查看评论

el-dialog 包裹的el-form ， resetFileds（）失效

hitower666的博客

10-31

501

如果你编辑时，第一次打开dialog的时候给表单绑定的model赋值了，这时候这个model的初始值就变成了你所赋值的值，所以resetFields的时候，会将model对应的每个值重置到初始值，这时候的初始值就是你编辑时赋值的那个值。但是关闭后，再点击新建角色，又是之前编辑的内容。所以：页面一进入， form表单就是原始的。点击编辑后，会一个个给form进行赋值，那么重置时，就会重置给给form赋值后的效果。根据文档显示，resetFields是对整个表单进行重置，将所有字段值重置为空并移除校验结果。

el-dialog关闭后清空form表单(resetFields()方法不生效的原因及解决方法)

wangjie的博客

10-25

4127

form表单属性resetFields不生效问题解决，el-dialog清空form内容，重置组件。

vue3+element-plus表单重置resetFields方法不生效踩坑

YSQ_qsy的博客

08-05

1万+

vue3+element-plus表单重置resetFields方法有时不生效

vue中的resetfields函数

weixin_43846410的博客

08-18

2286

:visible.sync控制el-dialog的显示，当我们退出弹窗时会销毁子组件的变量，实现子组件初始化，下次进入就不会携带上次输入的信息了。一般在新增和编辑的时候用的都是同一个对话框和form表单，而在先点击编辑的时候form表单的resetfileds函数就会失效解决原理：实际上结构是（通过vue类比） data里面有一个form表单的初始值， methods里面定义了一个resetfileds的函数 resetfileds函数的作用:记录在mounted生命周期执行之前最后一次for

Vue3+Element Plus 关于Dialog弹出Form表单，使用resetFields重置无效的解决

qq_41789605的博客

02-21

5707

解决Element Plus 弹出表单重置resetFields问题。

快速解决Vue、element-ui的resetFields()方法重置表单无效的问题

10-14

在Vue和Element-UI的开发过程中，我们常常遇到表单重置的问题，特别是当使用`resetFields()`方法时发现表单并未如预期那样被重置。这个问题通常涉及到多个方面，让我们逐一探讨解决方法。首先，确保在HTML模板中...

element-plus弹窗中el-form使用resetFields方法不生效

weixin_41586389的博客

08-01

1419

element-plus弹窗中使用el-form resetFields方法失效问题解决

vue element ＜el-dialog＞标签内表单验证坑记录

小学僧的学习笔记

05-08

1122

发生情况：在dialog中写表单验证，dialog框关闭后表单验证还存在解决：关闭时直接销毁dialog v-if

el-dialog设置高度、使用resetFields清除表单项无效问题

stay hungry, stay foolish

09-04

5029

可以将在弹窗关闭时将表单赋值为空，手动重置表单项。(2) 在el-dialog上自定义样式，使用。设置固定高度，或者限制最小的高度。包裹一个div，给它设置样式。(1)在el-dialog。

【Vue】项目dialog组件数据项清空

慕白Lee的博客

05-06

1万+

第一次打开dialog就不重置了, 这样第一次dom也构建完毕了, 不会存在获取不到的情况, 第二次的时候在使用this.$refs['myForm'].resetFields();数据清空报错, 发现只有第一次渲染才会报错, 后面就正常了,

关于vue3中弹窗resetFields()的使用

qq_45808765的博客

06-25

3825

关于vue3中resetFields()的使用

vue3+TS+Ant Design Vue 的 formRef.value.resetFields() 报错不生效

weixin_42729938的博客

06-10

1519

vue3+TS+Ant Design Vue 的 formRef.value.resetFields() 报错不生效

vue3+element-plus表单重置resetFields方法不生效，解决办法

最新发布

蒙古国海军司令部

06-03

1492

需求：当点击登录按钮时，登录表单弹出，当点击登录表单右上角的×时销毁表单，并清空表单。解决resetFields不生效问题！

vue3+element-plus 弹框表单重置(resetFields)失效、无效解决

我不是程序员的博客

10-13

5633

一个弹框同时实现新增、修改功能。点击修改时赋值到弹框里面的表单，点击新增弹框里面表单都是无值，表单修改再新增重置无效

vue项目表单中使用resetFields()报错或未生效

蚂蚁搬砖我砌墙

10-07

6939

使用resetFields()报错或未生效的解决方案

vue表单报错 "TypeError: Cannot read property 'resetFields' of undefined

斑斓小星愿的博客

12-09

1万+

vue表单报错 Error in event handler for “click”: “TypeError: Cannot read property ‘resetFields’ of undefined” 在做vue element 项目中，做了一个新增打开弹框的功能，想每次点击新增的时候表单项重置。使用了this.$refs[formName].resetFields(); 但是报错了...

vue3 elform 在重新封装的弹窗el-dialog内无法resetFields

qq_36775019的博客

10-26

512

重新封装后 , 弹窗支持双向绑定 , 但是取消后resetFields失效了 , 上次校验结果还在 , 经过排查 , 应该为vue3 setup内钩子顺序问题 , 在resetFields之前 , dom已经销毁了利用watch 和 nextTick 达到效果 watch( () => data.visible, (val) => { nextTick(() => { formRef.value?.resetFields()