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

原创 已于 2022-03-14 11:15:47 修改 · 3.6k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #element-ui #javascript #js

于 2020-09-17 16:32:42 首次发布
本文介绍了Vue中使用this.$refs[formName].resetFields()重置表单时的注意事项，包括确保表单具备ref属性、表单项需设置prop属性且值与数据绑定一致，以及重置的具体含义。
目前发现this.$refs[formName].resetFields();有以下几种情况可能会导致失效：

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

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

element-ui、element-plus表单resetFields()无效的坑
m0_58355897的博客
04-22 882
如题目
vue-i18n结合Element-ui的配置方法
10-16
对于第二个问题，即Element-ui框架内部提示文字无法更改的问题，需要手动处理vue-i18n@6.x的兼容性问题。文章建议参考Element-ui的官方文档，并按照文档描述的方法来实现Element-ui组件的多语言切换。 为了整合国际...
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
10-14
主要介绍了快速解决Vue、element-ui的resetFields()方法重置表单无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
this.$refs[formName].resetFields() 失效
K_lele的博客
03-10 1014
在ui-element 上的说明用this.$refs[formName].resetFields() 可以重置表单，试过了几次才发现要只用这种方式重置表单必须要在表单标签中加入prop 和required 属性，通过这种方式重置才有效果。加上required 和prop 后是可以重置了，但是，又会在标签前面显示 * 必填的标识，好吧，有点无语，我想重置的是搜索框，又不需要必填。没办法只能在百度看看，后面找到了两个方法，也可以实现重置功能。formSearch为表单名称。
this.$refs[formName].resetFields()不起作用、ElementUI表单重置不起作用
Liux- 的博客
03-22 2183
elementui新增和修改用同一个弹窗，resetFields不起作用
elementui中form表单 resetFields 失效
pingfanblog
04-24 932
elementui form表单使用 resetFields方法失效
this.$refs[form].resetFields() 不生效
qq_25239049的博客
10-14 4842
所以，在 form mounted之前，如果给form表单赋值了，那么后面调用resetFields()都是无效的，因为form表单的初始值已经在 mounted 之前就被赋值了。而这个初始值是在form mounted生命周期被赋值上去的。1.el-form-item 没写prop。此方法用于将form表单的数据设置为初始值。
Vue element-ui父组件控制子组件的表单校验操作
10-15
在Vue.js框架中，Element-UI是一个非常流行的UI组件库，它提供了丰富的界面元素和功能，包括表单验证。在大型应用中，我们经常需要在父组件中控制子组件的行为，比如触发子组件的表单验证。以下将详细介绍如何实现...
vue项目表单中使用resetFields()报错或未生效
蚂蚁搬砖我砌墙
10-07 1万+
使用resetFields()报错或未生效的解决方案
this.$refs[‘form‘].resetFields()方法重置表单无效的坑
m0_67400973的博客
03-08 2623
this.$refs[‘form’].resetFields()方法重置表单无效的坑 1、用法不对 要想this.$refs[‘form’].resetFields()方法有效，必须配置el-form :model 属性和el-form-item中的prop属性，才可以。 注意：this.$refs[‘form’].resetFields()这个做法其实是重置表单到初始值，不是清空表单，当表单第一次在页面中渲染时所用的数据就是初始数据。 2、坑1 在还没有显示对话框之前就调用this.$refs[‘form
this.$refs[‘form’].resetFields()方法重置表单无效的坑
最新发布
m0_45858045的博客
02-16 2279
要想this.$refs[‘form’].resetFields()方法有效，必须配置el-form :model 属性和el-form-item中的prop属性，才可以。注意：this.$refs[‘form’].resetFields()这个做法其实是重置表单到初始值，不是清空表单，当表单第一次在页面中渲染时所用的数据就是初始数据。
vue3 resetFields不生效
qq_42859450的博客
08-15 1425
vue3 resetFields不生效问题
resetFields 不生效
m0_49494051的博客
01-22 1019
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
elment ui 之 表单 form 表单 的重置 this.$refs[formName].resetFields() 不生效
YZRHANYU的博客
12-09 1029
elment ui 之 表单 form 表单 的重置 this.$refs[formName].resetFields() 不生效
vue3+element-plus表单重置resetFields方法不生效踩坑
热门推荐
YSQ_qsy的博客
08-05 2万+
vue3+element-plus表单重置resetFields方法有时不生效
resetFields()不生效
apanpan8126的博客
04-02 1731
没有prop属性
Vue3中Element-plus 表单resetFields失效，不能重置该表单项，使用$nextTick解决问题
qq_42587686的博客
08-28 4971
使用nextTick解决表单重置失效问题
vue element form resetFields不生效解决方案
菜鸟阿达
12-08 1104
vue element form resetFields不生效解决方案 参考: https://segmentfault.com/a/1190000022516459 editButton(addressConfig) { this.$nextTick(() => Object.assign(this.addressConfig, addressConfig)) },
resetFields()不生效的原因
Hiroshi's
02-24 6854
编辑用户 新增用户 点击编辑的时候，数据回显，没问题： 点击取消，会调用方法 按理说应该会把表单清空。但是我们再点击新增的时候，数据并没有被清空： 原因： 点击编辑的时候，一旦执行showModal.value = true， 就显示dialog，然后立马就执行Object.assign(userForm, row) 此时数据修改了，但是dialog里面的el-form还没有mounted，也就是说，数据是在form表单mounted之前修改的，那么这个修改后的数据就成为了form表单的初始值。
vue中element-ui的resetfields()方法重置表单无效问题及解决办法
05-01
在Vue中使用element-ui开发表单时，我们经常会用到resetFields()方法来重置表单。但是有时候会遇到这个方法无效的情况。 首先我们需要明确resetFields()方法的作用，它是将表单元素的值重置为初始值。而如果我们...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值