解决Vue element-ui resetFields重置方法无效问题

已于 2022-03-14 11:15:47 修改
阅读量3.5k 收藏 5
点赞数 4
分类专栏： 前端 #Vue 文章标签： vue.js 前端 element-ui javascript js
于 2020-09-17 16:32:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/focusmickey/article/details/108646541
版权
前端 同时被 2 个专栏收录
66 篇文章 28 订阅
订阅专栏
#Vue
40 篇文章 6 订阅
订阅专栏
目前发现this.$refs[formName].resetFields();有以下几种情况可能会导致失效：

1、表单必须加上ref属性，如：
在这里插入图片描述
2、需要重置的表单项el-form-item必须要加上prop属性，并且prop属性的值必须和数据双向绑定的值最后面保持一致，如
在这里插入图片描述
3、重置的数据不是清空，而是重置为初始值

如果大家想一起交流学习，共同进步，欢迎搜索公众号“是日前端”，输入关键词如：前端基础，获取资料，资料刚开始整理，目前还在完善中，点击交流群按钮进交流群，群里仅限技术交流、面试交流等，需要其它相关资料可以群里说，后续交流群人数增多会考虑特色内容，再次感谢大家的支持~

是日前端
关注
专栏目录
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
10-14
主要介绍了快速解决Vue、element-ui的resetFields()方法重置表单无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
this.$refs[form].resetFields() 不生效
qq_25239049的博客
10-14 4604
所以，在 form mounted之前，如果给form表单赋值了，那么后面调用resetFields()都是无效的，因为form表单的初始值已经在 mounted 之前就被赋值了。而这个初始值是在form mounted生命周期被赋值上去的。1.el-form-item 没写prop。此方法用于将form表单的数据设置为初始值。
前端--element-plus表单重置校验resetFields失效-问题记录
最新发布
qq_61570366的博客
09-30 322
问题描述：新增和修改对应的数据字段一般来说基本相同，我项目中对于某一模块功能的新增和修改数据使用了同一个dialog，打开组件页面后，先点击新增再点击编辑，表单内容可以重置，但似乎先点击编辑再点击新增，新增对话框中的表单数据没有被重置。，而form表单初始值在对dialog弹出之后被渲染，因此每一次重置都是重置为dialog第一次渲染时form的值。解决：再点击编辑按钮弹出对话框之前，使用Vue实例自带的nextTick()方法对form初始值进行赋值。
vue项目表单中使用resetFields()报错或未生效
蚂蚁搬砖我砌墙
10-07 8533
使用resetFields()报错或未生效的解决方案
vue3 resetFields不生效
qq_42859450的博客
08-15 1373
vue3 resetFields不生效问题
elementui中form表单 resetFields 失效
pingfanblog
04-24 618
elementui form表单使用 resetFields方法失效
vue-i18n结合Element-ui的配置方法
10-16
对于第二个问题，即Element-ui框架内部提示文字无法更改的问题，需要手动处理vue-i18n@6.x的兼容性问题。文章建议参考Element-ui的官方文档，并按照文档描述的方法来实现Element-ui组件的多语言切换。 为了整合国际...
Vue element-ui父组件控制子组件的表单校验操作
10-15
在Vue.js框架中，Element-UI是一个非常流行的UI组件库，它提供了丰富的界面元素和功能，包括表单验证。在大型应用中，我们经常需要在父组件中控制子组件的行为，比如触发子组件的表单验证。以下将详细介绍如何实现...
vue中element-ui的resetfields()方法重置表单无效问题及解决办法
05-01
在Vue中使用element-ui开发表单时，我们经常会用到resetFields()方法来重置表单。但是有时候会遇到这个方法无效的情况。 首先我们需要明确resetFields()方法的作用，它是将表单元素的值重置为初始值。而如果我们...
resetFields 不生效
m0_49494051的博客
01-22 947
el-form要设置ref属性，且ref的值与this.$refs[form].resetFields()中的form一致 el-form-item要设置prop属性，表单rule验证和resetFields()清除的都是prop绑定的字段 还有就是！！！注意大小写问题！:model=“ruleForm” 和 ref=“ruleForm” 大小写必须一致！ <el-form ref="userForm" :rules="userRules" :model="userForm" label-wid
vue3+element-plus表单重置resetFields方法不生效踩坑
YSQ_qsy的博客
08-05 1万+
vue3+element-plus表单重置resetFields方法有时不生效
resetFields()不生效
apanpan8126的博客
04-02 1656
没有prop属性
Vue3中Element-plus 表单resetFields失效，不能重置该表单项，使用$nextTick解决问题
qq_42587686的博客
08-28 3914
使用nextTick解决表单重置失效问题
vue element form resetFields不生效解决方案
菜鸟阿达
12-08 1040
vue element form resetFields不生效解决方案 参考: https://segmentfault.com/a/1190000022516459 editButton(addressConfig) { this.$nextTick(() => Object.assign(this.addressConfig, addressConfig)) },
resetFields()不生效的原因
Hiroshi's
02-24 6591
编辑用户 新增用户 点击编辑的时候，数据回显，没问题： 点击取消，会调用方法 按理说应该会把表单清空。但是我们再点击新增的时候，数据并没有被清空： 原因： 点击编辑的时候，一旦执行showModal.value = true， 就显示dialog，然后立马就执行Object.assign(userForm, row) 此时数据修改了，但是dialog里面的el-form还没有mounted，也就是说，数据是在form表单mounted之前修改的，那么这个修改后的数据就成为了form表单的初始值。
【Vue】Vue、element-ui的resetFields()方法重置表单无效问题及解决办法
热门推荐
徐海东的博客
05-23 4万+
问题： 使用this.$ref['form'] .resetFields()无法重置表单项 原因： 1.没有给表单添加ref属性 <el-form ref="form"></el-form> 2.表单项el-form-item没有添加prop属性，prop属性需要与input框绑定的属性一致 <el-form ref="form" :model="si...
this.$refs[‘form’].resetFields()方法重置表单无效的坑
m0_45858045的博客
02-16 1701
要想this.$refs[‘form’].resetFields()方法有效，必须配置el-form :model 属性和el-form-item中的prop属性，才可以。注意：this.$refs[‘form’].resetFields()这个做法其实是重置表单到初始值，不是清空表单，当表单第一次在页面中渲染时所用的数据就是初始数据。
解决Vue中Element resetFields()重置表单不生效的问题（含Cannot read property ‘resetFields‘ of undefined问题解决）
unlilalila的博客
11-25 2万+
解决Vue中Element resetFields()重置表单不生效的问题， 解决Cannot read property ‘resetFields‘ of undefined问题
this.$refs[formName].resetFields() 失效
K_lele的博客
03-10 871
在ui-element 上的说明用this.$refs[formName].resetFields() 可以重置表单，试过了几次才发现要只用这种方式重置表单必须要在表单标签中加入prop 和required 属性，通过这种方式重置才有效果。加上required 和prop 后是可以重置了，但是，又会在标签前面显示 * 必填的标识，好吧，有点无语，我想重置的是搜索框，又不需要必填。没办法只能在百度看看，后面找到了两个方法，也可以实现重置功能。formSearch为表单名称。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值