el-form 表单重置resetField无效（v-if+resetField标签切换后再切回来重置无法生效）

最新推荐文章于 2025-06-11 13:55:02 发布
最新推荐文章于 2025-06-11 13:55:02 发布
阅读量1.9k 收藏 4
点赞数
CC 4.0 BY-SA版权
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lingliu0824/article/details/109139436
本文探讨了在Vue.js中使用v-if与v-show进行组件切换时，表单重置行为的不同表现。当使用v-if时，表单重置可能会导致数据恢复到最初状态，而非清空。通过案例分析，指出了使用v-show代替v-if来解决这一问题的方法。

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

正常的表单重置，会清空表单数据和表单验证结果
在这里插入图片描述
在这里插入图片描述
问题描述：有两个功能块A,B可以点击来回切换，切换的实现就是通过v-if来决定展示哪一个。此时在展示A时给A表单的a输入框（使用了双向绑定）输入123，不点击重置，点击切换为B，此时再切换为A时，a输入框的数据为123，且点击重置无法生效，修改a输入框内容点击重置，输入框内容变成123。
大致效果：
在这里插入图片描述
由于v-if是标签的销毁和重新创建，所以在展示A时给a输入框赋的值会在A销毁并再重新创建后认为那是表单的默认值。
参考资料：
在这里插入图片描述

解决：将AB切换使用的v-if换成v-show

记一次elementui el-form组件resetFields方案无法重置部分字段值的问题
全干攻城狮
09-24 6953
背景 今天在使用elementui时，出现了一个诡异的问题，编辑、新增功能公用的表单，绑定数据后，关闭模态框无法重置部分表单项的值，如下图所示： 点击编辑按钮，打开模态框如下图： 关闭编辑模态框后，打开新增模态框，如下图（图中资源路径字段并未被重置）： 问题排查 是否el-form-item缺失了prop字段？ 表单绑定的值是否与data中定义的变量不一致？ 是否因为缺少了$nextTi...
el-form动态表单验证（v-if、v-show导致校验失效的bug）
YSD2468的博客
04-13 2736
今天同事遇见一个很奇怪的问题，vue里面element form表单验证有一个不生效。 一开始我以为是prop没绑定或者绑定错了 ![验证不生效](https://img-blog.csdnimg.cn/20200413202247674.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cH...
v-if页面切换时，el-form的resetFields不起作用
weixin_38345306的博客
06-14 671
# 页面效果： v-if 控制 el-form的显示，当再次新增时，调用resetFields，消除校验， # 问题： 当el-form没有校验报错时，调用resetFields失效 # 解决办法： 把v-if改成 v-show
element plus的el-form重置无效
最新发布
Xiang_Gong_Ya_的博客
06-11 360
摘要：文章分析了Element Plus表单重置功能的两个关键问题：1）表单字段重置需配置prop属性，否则resetFields()无法识别；2）重置时应将页码重置为第一页。解决方案包括在表单项添加prop属性（如prop="select_start_time"），并在resetForm方法中执行formEl.resetFields()后，手动设置currentPage.value=1，最后调用getData()重新获取数据。示例代码展示了表单定义和重置按钮的实现方式。
el-form 使用 resetField ，TypeError: Cannot read properties of undefined (reading ‘indexOf
lagego的博客
06-29 670
必须保证每个el-form-item 设置prop，不允许为空，否则汇报以上TypeError: Cannot read properties of undefined (reading 'indexOf'） 错误。
resetFields方法重置表单失败
热门推荐
笔墨茶叶的博客
10-21 2万+
el-form的重置表单（resetFields()）不生效的其他原因
qq_40417349的博客
03-04 1169
经过反复测试，还有一种情况也会导致resetFields失效，如下代码中，在el-form与el-col标签之间还添加了一个template标签，原本用于数据加载时不显示表单内容，但是，经过反复测试发现，它在这个位置会导致resetFields重置表单数据操作失效，具体原因还不清楚；将其删除之后，resetFields操作生效。近日我也遇到了el-form的重置表单（resetFields()）方法不生效的问题，网上查找了很多解答，反复检查我的写法实际上都是符合使用规则的，但是还是不生效，好生奇怪。
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
10-14
在Vue和Element-UI的开发过程中，我们常常遇到表单重置的问题，特别是当使用`resetFields()`方法时发现表单并未如预期那样被重置。这个问题通常涉及到多个方面，让我们逐一探讨解决方法。 首先，确保在HTML模板中...
el-form重置表单不生效vue3中
03-08
### 解决 `el-form` 在 Vue 3 中重置表单无效的问题 在 Vue 3 中遇到 `el-form` 的 `resetFields()` 方法无法正常工作的情况，通常是因为组件生命周期的变化以及响应式对象的更新机制不同所致[^1]。 当调用 `...
【ElementUI 表单校验】一个 el-form-item 下多个表单校验（循环校验）
前端知识分享喵
06-07 4534
前端开发项目的过程中，批量表单循环校验是很常见的，如上图，动态添加奖励计算规则，把所有的表单放到了一个 el-form-item 下。也可以理解为 el-form-item 做了嵌套，外层当然也可以省略，样式做微调，下面通过代码来详细的看一下。不足之处，多多交流。
vue项目表单中使用resetFields()报错或未生效
蚂蚁搬砖我砌墙
10-07 1万+
使用resetFields()报错或未生效的解决方案
Element-UI Form表单 resetFields() 重置表单无效问题
JEECG官方博客
03-15 2852
描述： 最近在使用Element-UI 的 Form 组件时，遇到了给清空按钮设置了resetFields()，点击却无法生效的问题 解决： 表单项 el-form-item 的 prop 属性值应该与表单项内部控件的 v-model 保持一致 <el-form-item label="备注" prop="remarks"> <el-input v-model="selectForm.remarks" /> </el-form-item> 总结
解决表单＜el-form＞无法实现重置的方案
weixin_45331887的博客
04-19 1359
## 记录项目点点滴滴04.19 问题描述： 今天在写<el-form表单的时候，在重置表单数据时，点击事件无效，无法将表单的数据置空。回去看了vue的文档后，发现在<el-form-item没有添加prop属性导致无法重置，最后添加后，解决了问题。 解决方案： 1.没有在表单中绑定ref对象(可不加:)，正确写法如下 2.没有给表单项<el-form-item添加prop属性 PS:prop的值要和model绑定的值一致。 3.方法实现 ①在methods方法中写一个重置表单信息的
el-form重置resetFields
weixin_44707050的博客
11-09 1019
resetFields方法，指恢复初始值，并且清空校验， el-form必须有model,及props 解决： 使用this.$ref[formName].resetFields(); this.classForm = { name:'', age:'' } 再次将classform表单清空值即可
Vue Element Form表单 resetFields重置无效
ZeroKoop
07-10 923
原因有两点： el-form 标签需要绑定 ref 和 :model 属性 el-form-item 标签要绑定 prop 属性
el-form中的resetFields的使用
蓝精灵的博客
06-28 1119
在实际开发中，Form表单的内置方法resetFields()，这个函数是用来重置表单项中的所有数据，这里的重置并非将字段全部置为空，而是根据开发者在页面设置的默认初始值去重置的，element-plus 官方文档中写道，resetFields：重置该表单项，将其值重置为初始值，并移除校验结果。
踩坑系列-VUE的表单重置-报错：TypeError: Cannot read property ‘resetFields‘ of undefined“
invalid_oath的博客
09-09 1853
一. 背景 最近写的一个后台管理的时候需要对密码以及手机号进行修改，但是我想在修改手机号或者密码的对话框关闭的同时，将表单数据和验证规则清空，达到比较好的体验效果。 二. 寻找原因 起初我使用的是resetFields将重置，（注意： resetFields 作用不是清空表单，而是将所有字段值重置为初始值）。但是呢，写出来的代码出现"TypeError: Cannot read property ‘resetFields’ of undefined"的错误。我找了一下，引用网上的原因：这个错误是因为你的do
避免在使用Element-UI el-form时的resetFields陷阱
No_Name_Cao_Ni_Mei的博客
06-14 1045
在使用Vue.js结合Element-UI开发表单时，的方法是一个常用的功能，用于重置表单项到初始状态。然而，这个方法在某些情况下可能导致一些不易察觉的问题。本文将分享一个实际遇到的使用陷阱，并提供一个解决方案。假设我们正在开发一个产品管理系统，其中包含“添加产品”和“修改产品”两个功能。我们使用Element-UI的来构建表单，并使用方法来重置表单数据。在实现“添加产品”对话框时，我们遇到了一个问题：当从修改模式切换到添加模式时，即使调用了，表单字段也没有正确重置，导致旧的值依然残留。初次尝试解决问题时，
el-form组件使用resetFields重置失效问题解决，有效避坑
weixin_45755709的博客
12-21 5344
el-form组件使用resetFields重置失效问题解决，有效避坑
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值