vue 使用this.$refs[‘表单名‘]清空表单数据没效果（注意添加prop属性）

最新推荐文章于 2023-05-18 09:13:53 发布
最新推荐文章于 2023-05-18 09:13:53 发布
阅读量2.4k 收藏 2
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/d_append/article/details/110920635
版权

应用场景: 在使用vue的el-form填写表单数据, 在点击确认或者取消按钮后,希望下一次再打开表单时,表单是空的。

表单如下：
在这里插入图片描述

在这里插入图片描述

这里需要注意要给表单加上ref属性，并且在el-form-item 加上prop属性，否则会导致清空不了表单

在左下角两个按钮下绑定事件**（事件传参为表单名字）**：
在这里插入图片描述

在这里插入图片描述

d_append
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 解决通过this.$refs来获取DOM或者组件报错问题
11-20
1.关于this.$refs的使用场景 如果ref属性加在普通元素上，那么this.$refs.name则指向该DOM元素 <p ref=”p”>hello</p> <!– this.$refs.p 指向该DOM元素 –> 如果ref属性加在组件上，那么this.$refs.name指向该组件实例 <child ref=”child”></child> <!– this.$refs.child 指向该组件 –> 2.为什么有时候通过this.$refs.name来获取会报错？ 一个比较常见的场景：在一个弹窗打开的时候立刻通过this.$refs来
怎样解决ElementUI下table多选分页后选中回显、勾选分页后不保存问题
wwngxu的博客
06-25 2105
怎样解决vue+ElementUI下table多选分页后选中回显、勾选分页后不保存问题和 解决选中后清除选中状态的问题
解决el-table组件中，分页后数据的勾选、回显问题？
SM_Cute的博客
02-23 3399
解决el-table组件中，分页后数据的勾选、回显问题？
element-ui带复选框表格，切换分页保留勾选状态，退出清空勾选状态
gxh287010的博客
05-18 1212
【代码】element-ui带复选框表格，切换分页保留勾选状态，退出清空勾选状态。
Vue中重置表单无效问题及解决办法
liuxiaoqi_123的博客
10-26 2551
Vue中重置表单无效问题及解决办法
form this.$refs[formName].validate() this.$refs.form.clearValidate() 表单验证 清除表单验证 局部验证 取消局部验证
xiaoheisboy的博客
04-19 8545
form this.$ refs[formName].validate() this.$refs.form.clearValidate() 表单验证 清除表单验证 局部验证 取消局部验证 废话不多say 上代码 ????记得点赞哦 ???? ????大佬请看???? 你的form标签里加 :rules=“rules” （rules是校验规则） 对于需要校验的值增加 prop 提交案件 要写成 ： @click=“asd(‘formName’)” （不再说明方法 不动看element文档
resetFields 无法清空数据
u012174809的专栏
12-21 1070
做到这三步就能清除并初始化为data里的数据,缺一不可。 1.在 el-form表单里写上 ref="ruleForm" //名字随意 2.在每个表单项写上 prop="name" <el-form-item :label="$t('common.name')" prop="name"> <el-input v-model="ruleForm.name" style="width:100%"></el-input> </
element移除表单验证项
_小郑有点困了的博客
02-25 1730
element移除表单验证项 移除某项 this.$refs['form'].clearValidate(['adminAcc']); 移除所有 this.$refs['form'].clearValidate();
vue3表单清空失效原因总汇
a1006061435的博客
09-11 2310
vue3表单清空失效原因总汇 一定要加prop属性，否则清空不掉 ref绑定的名字一定要一致，否则还是清空不了 还有就是一定记住要return。。。。。 最后一步调用ruleForm.value.resetFields()即可清空了 ...
Vue Element Form表单 resetFields重置无效
ZeroKoop
07-10 786
原因有两点： el-form 标签需要绑定 ref 和 :model 属性 el-form-item 标签要绑定 prop 属性
vue列表单项展开收缩功能之this.$refs的详解
10-17
主要介绍了vue列表单项展开收缩功能之this.$refs的详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue中 this.$set的用法详解
10-16
主要介绍了vue中 this.$set的用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue中的this.$options.data()和this.$data用法说明
10-15
主要介绍了Vue中的this.$options.data()和this.$data用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于matlab实现实现了基于项目的协同过滤代码，MATLAB实现.rar
05-04
基于matlab实现实现了基于项目的协同过滤代码，MATLAB实现.rar
各地区年末城镇登记失业人员及失业率.xls
最新发布
05-05
数据来源：中国劳动统计NJ-2023版
企业固定资产信息管理系统设计与实现.doc
05-04
企业固定资产信息管理系统设计与实现.doc
node-v11.14.0-darwin-x64.tar.xz
05-04
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
node-v8.9.1-sunos-x64.tar.xz
05-04
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
node-v12.10.0-linux-armv7l.tar.xz
05-04
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
elementui清空表单验证
05-27
要实现清空表单验证，可以使用 ElementUI 提供的 `resetFields` 方法，该方法可以将表单中的所有字段值重置为初始值，并清除所有验证结果和验证状态。可以参考以下代码示例： ```vue 用户名" prop="username"> ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值