el-input无法输入产生原因及解决方案

已于 2022-05-21 20:07:31 修改
阅读量1w 收藏 2
点赞数 1
文章标签： javascript vue elementui
于 2021-11-21 12:51:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/quan44444/article/details/121452135
版权

昨天项目有个需求，从接口获取数据后覆盖原来的数据，没多想，觉得很简单啊，直接赋值就覆盖原来的数据了，但是这么做后输入框突然不能输入值了，但是确实是有触发输入事件的，废话少说，上图。

 

这里的话，el-input绑定的是testItemValue,而这个值是包含在上图的list对象里的，我选择了直接覆盖list对象，这时候造成了list[index]引用了item对象，而el-input绑定的还是原来的对象，输入的值也不会赋值给现在的对象，解决这个问题的方法就是遍历赋值，网上有些说用JSON.stringify和JSON.parse来进行深拷贝，这个也是不行的，这种深拷贝的方法也是直接引用了另一个对象，还是会有不能输入的问题，用下图这种方法就能轻松解决了(若两个对象的属性完全相同，也可以使用解构赋值)

coder-quan
关注
el-input无法输入情况汇总（记录一下）
weixin_43936040的博客
08-16 8172
有加form的表单校验，然后输入框无法数据的情况 整个页面是一个form表单嵌套着 红色部分是看情况增加，如果不点新增那它也可以没有，点了新增里面的input就成了必填 这里data 声明里是这样的，addAccountPOS 数组就是红色方框部分就是绑定的数组做了循环 subForm: { updateSupplierName: '', billsType: 'UPDATE', accountVOs
el-table 里面嵌套el-input 数据改变了但是页面没有同步更新（全网最全）
weixin_44875212的博客
03-21 1463
el-table 里面嵌套el-input 数据改变了但是页面没有同步更新（全网最全）
el-input实现不了输入的原因
weixin_44740072的博客
06-20 7219
el-input实现不了输入，页面渲染不上的原因
vue2和el-input无法修改和写入，并且不报错
最新发布
呆萌小新@渊洁的博客
07-24 518
由于orginParams初始化为 originParams:{}.造成originParams被赋值时，属性均为动态型。虽然可以通过这种方式让父子数据交互，但可以发现，子组件的v-model接收对象，和props.row的交互逻辑异常麻烦。看过相关的很多内容，大部分集中在说需要添加$forceUpdate.而我根本不行。但我的业务中可以发现，进行了多层匿名子组件嵌套。上述内容中经测试，数据回显异常，程序不报错，无法显示输入变化，但是数据可以被正常修改。在我所在的业务场景中。业务中原本使用动态方式，
开发（bug）总结5-el-input无法输入的问题和表单验证失败问题(亲测有效)
Mr_LiuP的博客
10-20 3462
原因（可能）：网上查了很多都没有给出明确的解释，有的说可能是因为组件嵌套太深导致的，也有可能是组件本身有潜在bug。真实原因也没搞懂，有知道的同学可以告诉下。// this.$forceupdate() // 强制数据刷新之后, 验证失效, 改用 $set ,亲测有效。点击添加，表单内可输入用户名 和 用户姓名，但有时会偶发出现无法这两个input框里面无法输入内容。大部分无法输入的问题：基本都是没有进行v-model双向数据绑定，这个很好解决。
el-input无法输入的问题和表单验证失败问题
weixin_53716093的博客
01-20 1万+
我们在做后台管理系统使用elementUI框架的时候会遇到一些问题，例如el-input无法输入问题，或者是使用了$forceUpdate后出现表单验证失败问题
解决el-input无法输入的问题和表单验证失败问题
qq_52126119的博客
03-20 3523
1、在el-input组件中使用v-model进行双向数据绑定 2、有时，你会发现我们进行了双向数据绑定了，但是el-input还是无法输入，我们就要使用绑定input事件，然后使用$forceUpdate方法强制刷新，这样子会解决我们el-input无法输入问题，但是这会带出一个新的问题，那就是表单无法进行验证等一些问题。 3、使用$forceUpdate方法强制刷新 ，表单验证失效（表单已经输入值，表单验证显示为空）， 由于此次表单是动态添加的，rules也需要动态添加
el-input无法输入,输入不对
我是星星的博客
06-05 2553
在代码块中加入 @input="change($event)" 进行强制刷新，这样子会解决我们el-input无法输入问题，1、input输入框没有进行双向数据绑定，没有v-model。el-input输入框无法输入的问题？2、组件嵌套太深，无法读取。
vue中el-input绑定键盘按键(按键修饰符)
10-15
原因在于`el-input`是Element UI封装的组件，`el-`开头的标签属于自定义标签，Vue默认无法直接触发它们的键盘事件。为解决这个问题，Vue提供了一个`.native`修饰符，它可以帮助我们监听组件根元素的原生事件。 在...
input禁止键盘及中文输入,但可以点击
09-04
这个解决方案考虑了不同浏览器的兼容性问题，使得在IE和Firefox等浏览器中都能有效阻止键盘输入，但允许用户点击输入框进行其他操作。然而，这种方法可能不适用于所有场景，例如，如果输入框预期用户通过下拉菜单...
详解elementUI中input框无法输入的问题
10-15
当Input框无法输入时，通常有以下几个可能的原因： 1. **事件监听器问题**：如题目中提到的，可能是因为使用了`@input`事件但没有正确处理输入值的更新。`@input`事件会在用户输入时触发，如果在事件处理函数中没有...
el-input 无法输入
09-12
el-input无法输入的问题通常有几个可能的原因。首先，可能是由于el-input组件没有绑定双向响应式数据(v-model)导致的。在使用el-input时，需要将输入的值与组件的data进行双向绑定，以确保输入的内容能够正确地显示...
el-input无法进行输入以及el-radio触发了两次点击事件
weixin_44082271的博客
11-17 2133
记录使用elementUI的时候遇到的问题。例如：el_input无法进行输入、el-radio触发单次点击事件等。
el-input输入框无法输入问题
Giraffe0615的博客
08-24 1万+
el-input输入框无法输入问题
el-input 不能输入的解决办法
热门推荐
ErikChan的博客
08-11 2万+
问题背景 ElementUI 是国内前端工程师应该都听过或者使用过的前端框架， 不是使用简单，而且有着详细的文档和 API。然而，在使用 el-input 这个标签时，我遇到了一些困扰，有些情况下在 el-input 是无法输入的，就像是被禁止了一样，经过多番查找资料和查看官方文档，总结出以下解决办法，希望能给路过的前端工程师们一些参考 解决办法 场景一：标签嵌套太深 如果标签嵌套太深，会导致无法获取到 DOM，这是我们需要 $forceUpdate() 强制刷新，才可获取 <el-input
el-input不能输入问题解决
passerby_lin的博客
06-13 1758
写项目的时候，el-input输入框是循环出来的，发现输入不上，排查发现是数据发生改变，视图未重新渲染。
el-input无法输入的产生原因及解决方案
m0_51769717的博客
07-16 8417
el-input无法输入的产生原因及解决方案
el-input 无法输入内容的解决方法
qq_53816329的博客
04-10 994
问题el-form 中的el-input 无法输入内容 找了很久的解决方法 主要通过两种方法解决。
el-form表单 el-input 点击输入框无反应 无法输入
m0_64491262的博客
07-31 2468
比如有el-form下面有的行加上了el-row，有的没有加上el-row，可能会导致输入框的内容无法输入。也就是要保证el-form-item上面的层级是一致的。解决：最后发现我的问题是由于修改字段时，不小心修改了el-row的层级，导致层级混乱，所以点击无反应。主要是保证输入框绑定的值在data中提前定义好，或者调用$set 进行数据的双向绑定。使用el-form下的el-input 点击无反应 或者无法输入，需要查看。问题：新增框内，只有最上面的基础信息部分无法输入，点击输入框无反应。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值