＜el-form＞下的输入框无法输入内容，element-plus踩坑记录

最新推荐文章于 2024-08-07 10:29:44 发布
最新推荐文章于 2024-08-07 10:29:44 发布
阅读量607 收藏
点赞数
文章标签： javascript 前端 vue.js vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43951592/article/details/130871485
版权
在Vue.js开发中，遇到一个错误提示，指明同一个组件的ref和model属性不能设置为相同的值。为避免这种冲突，文章建议将ref属性改为editParamsRef，保持model属性为editParams，以此确保组件引用和数据绑定的正确性。
摘要由CSDN通过智能技术生成 
<el-form
    ref="editParams"
    :model="editParams"
    label-width="120px"
  >

原因：
ref 和 :model的值不能相同！
需要改成：

<el-form
    ref="editParamsRef"
    :model="editParams"
    label-width="120px"
  >
har01d
关注
vue3+element-plus 表单输入框无法输入
veceny的博客
03-12 4378
【代码】vue3+element-plus 表单输入框无法输入。
组件element------form组件（2），Switch 开关-----Form 表单
weixin_45343884的博客
08-08 3110
（7）Switch 开关 基本用法—绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。 <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"> </el-switch> &l...
el-form输入框无法输入内容
tutouxiaoyaonie的博客
09-23 2020
el-form表单输入框无法输入内容、下拉框无法选择数据问题
Vue3 Element plus的el-input组件无法输入问题
最新发布
SomeBodyL的博客
08-07 363
一个Vue3项目，在写登录界面的时候，使用了Element Plus的el-input组件，发现无法输入，以下是源码。将 :model 改为 v-model 就可以了。
el-form表单 el-input 点击输入框无反应 无法输入
m0_64491262的博客
07-31 2551
比如有el-form下面有的行加上了el-row，有的没有加上el-row，可能会导致输入框的内容无法输入。也就是要保证el-form-item上面的层级是一致的。解决：最后发现我的问题是由于修改字段时，不小心修改了el-row的层级，导致层级混乱，所以点击无反应。主要是保证输入框绑定的值在data中提前定义好，或者调用$set 进行数据的双向绑定。使用el-form下的el-input 点击无反应 或者无法输入，需要查看。问题：新增框内，只有最上面的基础信息部分无法输入，点击输入框无反应。
el-form表单回显，输入框无法输入+resetFields函数失效问题
my_darling_的博客
05-15 414
2、el-form的赋值需要是ref！reactive会导致无法输入；3、重置函数失效大概率是因为初始值拿错了，所以，，，干脆直接放弃--选择form.value = {xxx:"",xxx: ""}的形式。1、检查是否<el-form-item>是否包含prop属性；
vue3中使用element puls ui组件库的el-form,无法输入的问题
Start的小笔记
12-30 1613
element-plus表单无法输入 可能 el-form 的model 中的 ruleForm 跟系统冲突了，换成其他变量就可以 <template> <div class="login"> <div class="container"> <el-form ref="ruleForm" :model="ruleForm" label-width="120px" class="demo-ruleForm">
【ElementUI 表单校验】一个 el-form-item 下多个表单校验（循环校验）
前端知识分享喵
06-07 3558
前端开发项目的过程中，批量表单循环校验是很常见的，如上图，动态添加奖励计算规则，把所有的表单放到了一个 el-form-item 下。也可以理解为 el-form-item 做了嵌套，外层当然也可以省略，样式做微调，下面通过代码来详细的看一下。不足之处，多多交流。
elementui//el-form 中 input 框没有对其的原因 el-row 用了 :gutter。改用 &nbsp；
weixin_37877794的博客
09-12 1337
el-form 中 input 框没有对其的原因 el-row 用了 :gutter。改用 &nbsp; 修改后： 不用 :gutter。改用 &nbsp; <el-form-item v-for="(item, index) in form.value" :label="`字典${index + 1}`" :key="item.id" :prop="`value.${$index}`
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
Element-UI的el-form组件是用于创建表单的，它提供了一套完整的表单样式和交互。el-form通过prop属性接收验证规则，可以配合el-form-item和rules属性实现表单验证。el-form还支持form-label-width属性来设置表单标签...
Vue后台管理系统练习-7 element表单的简单封装
Yuki_Aruki的博客
06-18 603
效果如下，后面table等内容可以看上一篇： 由于本项目中多处需要使用表单，在这里做一些简单的封装Element-ui中的el-form需要在el-form组件内绑定存入数据的对象，同时每个el-form-item组件有不同的种类，输入框，单选框，复选框等，因此要实现封装就需要判断每个属性的类型，内容大致如下： 这里只写了几个常用的，其余类型可以参见官方文档，其实都差不多几个需要说的点： 这里我通过prop接收的父组件数据是form，但是el-form绑定的这个对象是用来储存输入的数据，一定会需要动态修改的
el-form重置后input无法输入问题
Zing_ing的博客
06-25 1214
是在重置前的formdata的基础上进行的，重置前的formdata与初始化进行比较，将初始化的属性和属性值赋值到现在的formdata中，而方法不会赋值过来，这也就是password为什么没有响应式的原因。在打开dialog直接点击重置后，我们再往password的input中输入，发现会无法输入，这是因为此时password不具有响应式，是新添加的属性。这就导致了在重置时，由于formdata的初始值设置中是有password，所以在重置后，formdata的结构如下。formdata会变成如下。
【踩坑笔记】vue3 element-plus el-input 无法输入问题
soladuor
10-08 8131
原因是 el-form 的 v-model="loginForm" ref="loginForm" 在vue3中值不能相同。把ref去掉或者改名即可。
vue3+el-form表单输入响应式失效问题
nowfuture的博客
05-29 644
中使用el-form时，如果el-form节点的ref属性和model属性同名，会导致输入框无法输入，选择框无法选择，代码如下。修改的办法是：修改成不同的名字就可以解决。
关于el-form中循环生成el-input，导致无法输入解决
weixin_43569270的博客
08-03 720
使用 $forceUpdate(),强制更新页面后会发现，表单校验失败了，因为绑定的数据没有发生变化，需要采用自定义表单校验，因为是动态表单，自定义验证函数需要卸载methods中。使用 $forceUpdate(),强制更新页面。判断循环表单绑定的数据的变化，进行校验。
element form组件无法输入文字或者选择器无效的原因和解决方法
wczdsg的博客
03-02 1757
问题分析 很多初次接触element-ui的同学，在用到element form组件时可能会遇到input框无法输入文字或者select选择器选不中内容或者校验功能没有触发，那是因为组件在初始化的时候未定义formData里的属性。 解决办法 在data里面定义formData及内部属性： data() { return { //formData: {}, 修改前 formData: { //修改后 username: '', password: '' } } } ...
vue3+element-plus 表单输入框无法输入、下拉框值不回显
qing_xing_的博客
07-11 2456
因为element-plus表单的ref和model的值不能设置相同的值，如果设置成相同的值，输入框无法输入、下拉框值不回显在element-plus的官方文档中是这样写的，可以看出来两者的值不一样 而在vue2+饿了么中是可以设置相同的值，官方写法如下...
el-form动态增减数据的问题，编辑时候input输入不了
m0_52611940的博客
10-23 511
el-form动态增减数据的问题，编辑时候input输入不了
element plus的el-form-item怎么设置为不可输入，显示固定值
04-22
<el-form> <el-form-item label="固定值"> <el-input value="固定值" disabled readonly></el-input> </el-form-item> </el-form> </template> ``` 在上述示例中，el-input 控件被禁用并设置为只读，以便在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值