关于vue2和vue3el-form的ref问题...

最新推荐文章于 2024-05-16 23:40:36 发布
最新推荐文章于 2024-05-16 23:40:36 发布
阅读量1k 收藏 1
点赞数
文章标签： vue.js javascript 前端 elementui Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lsfoyp/article/details/129025939
版权

在element-ui或者elment-plus中，由于我们会用el-form的ref属性来做一些验证，有时候在我们升级vue3的过程中，难免会直接拷贝html代码，这个时候vue2原本不存在的问题，就发生在了vue3中。

vue2中el-form中我们的:model和ref如果绑定同一个变量是没有问题的。

vue3中如果ref绑定的是同一个用户直接就无法输入。

解决方法：不要同名即可。

把图中的ref名称修改成model不一样的就可以了。

lsfoyp
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue.js+element 默认提示中英文操作
01-18
element默认中文版，但是我们在做英文页面时自己翻译很不爽，所以我们用element自带英文包，只要在html页面中引入就可以了， 具体引入方法有很多种...el-form :model=form :rules=rules ref=form label-width=110px au
Elementui 中el-form表单中的ref是干嘛用的
servepeople的博客
08-16 6917
属性，你可以在 Vue 组件中通过引用来访问和操作这个表单组件，而不需要通过 DOM 查询或其他方式。的实例，从而可以进行一系列操作，如表单验证、重置、获取表单数据等。属性可以在 Vue 组件的 JavaScript 部分直接访问。组件实例，从而方便地操作表单数据和执行相关操作。属性允许你在 Vue 组件中通过引用直接访问。是用来获取对该表单组件的引用的属性。，你可以在 Vue 组件的方法中使用。在 Element UI 的。在这个例子中，通过在。
ElementUI中＜el-form＞标签中 ref、:model、:rules 的作用
热门推荐
m0_46893049的博客
08-02 2万+
ElementUI中标签中 ref、:model、:rules 的作用
vue3使用element plus自定义封装form表单拿不到ref实例无法进行校验问题
qq_38607577的博客
10-24 723
console.log(‘表单确认’, ruleFormRef.value);
el-form多个表单共用一个ref，引发的校验问题及解决方案
qq_36761520的博客
08-08 758
代码当中有多个tab，会循环渲染多个Form（底层是用elment-plus的Form二次封装的），多个Form共用一个ref，这样导致的问题是tab切换时，上一个tab的表单项还会校验，需求是只校验当前tab的表单项。
vue 多个组件使用同一个ref
wang___haha的博客
09-26 1783
找到项目中用到的vue.js文件，\node_modules\vue\package.json文件中的module属性为默认引入的vue.js文件。打开改文件，搜索$refs，找到此处代码。
vue中使用ref绑定元素
小黄呀呀呀的博客
07-05 5347
原生js获取DOM元素是很麻烦的，需要用如：document.getElementById这么长的API来获取，于是jQuery应运而生，$(“#id”)的使用使我们的操作变得简便起来。但是jQuery仅仅是库（插件），不能够用来搭建框架。于是vue可以帮我们解决这个问题，vue也有自带的获取DOM的方法，那就是ref。它不仅可以获取DOM元素还可以获取组件。1、给dom节点记上ref属性，可以理解为给dom节点起了个名字。2、加上ref之后，在$refs属性中多了这个元素的引用。3、通过vue实例的$re
vue.js前后端数据交互之提交数据操作详解
12-29
本文实例讲述了vue.js前后端数据交互之提交数据操作。分享给大家供大家参考，具体如下： ...<el model=ruleForm rules=rules ref=ruleForm class=demo-ruleForm> <el-form-item label=用户名 prop=name
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
12-28
2.表单项el-form-item没有添加prop属性，prop属性需要与input框绑定的属性一致 <el ref=form model=sizeForm label-width=80px size=mini> <el label=活动名称 prop=name> <el v-model=sizeForm.name></e
vue2.0 + ele的循环表单及验证字段方法
12-29
关于vue2.0 + ele的表单循环以及对应字段的验证！！！！！ html代码 <el ref=ruleForm inline=true model=form label-width=140px rules=rules v-loading.fullscreen.lock=fullScreenLoading element-loading-text...
el-form 多层级表单的实现示例
11-19
前言 ...el-form 使用，详情可参见： Form 表单 有几个比较重要的属性： ref 相当于标签的 id model 表单数据对象 rules 表单验证规则 prop 表单域 model 字段 label 标签文本 在提交按钮的
VUE3+Element-plus中el-form的使用
nopyramid的博客
11-25 1393
Element-plus使用el-form必须配置ref和model属性，二者的值不能相同（在ElementUI中是可以相同的）。ref的值在声明的时候要引入FormInstance，这个又必须在script中声明lang为ts，不能使用js。2.每个el-form-item必须设置prop属性，否则重置方法resetFields不生效。4.要控制表单项的布局，使用el-row和el-col是不错的方法，易于控制。1.el-form的ref和model属性的参数值必须不一样，否则会冲突。
Vue中ref使用
xmc_csdn的博客
03-10 1959
ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 $refs 对象上。 在普通的 DOM 元素上使用ref，引用指向的就是 DOM 元素； 如果用在子组件上，引用就指向组件实例。 在vue中的表单form中，如果我们在开发时需要表单提交后，立即清空表单中的所有内容。 则vue的form表单有一个方法如下： 使用$refs.resetFields() 方法即 <el-form :model="addForm" :rules="addFormRules" ref=
119.(前端)商品管理增加基本信息布局——model与ref与prop概念介绍、使用级联选择器与tab中使用form表单
m0_63953077的博客
11-02 953
model与ref与prop概念介绍、使用级联选择器与tab中使用form表单
Vue element UI多个表单同时校验
weixin_48624392的博客
02-22 1316
Vue element UI多个表单同时校验
vue3中使用element-plus的el-form遍历表单和表单验证,动态获取ref
vue+iview 动态渲染表格（vue.js结合iview插件）
08-16 4912
vueAPI链接：https://v3.cn.vuejs.org/guide/composition-api-template-refs.html#%E6%A8%A1%E6%9D%BF%E5%BC%95%E7%94%A8 vue3获取动态ref： <template v-for='(v,index) in state.tasks' :key='"tasks"+index'> // userWorkFormRefs 一定名字不要写错，要和js中的一致 <el-form :mo
表单中v-model和ref的区别？
x452777439的博客
07-19 2271
<el-form :model="editForm" :rules="editRules" ref="editForm" label-width="70px"> answer :v-model获取的是对象，只跟值有关，而ref获取到的是为了操作Dom对象，可以使用$refs来操作
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1093
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
vue中的事件
最新发布
weixin_43390711的博客
05-16 157
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
vue el-table 加 el-form
09-27
2. 在el-table中使用el-table-column组件来定义表格的列，同时可以在列中添加el-form-item组件，用于展示和编辑表单元素。 3. 在el-form-item中使用el-input、el-select等组件来创建表单元素，可以通过v-model指令来...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值