element ui --input输入框不能输入的问题

最新推荐文章于 2024-03-20 10:18:21 发布
原创 最新推荐文章于 2024-03-20 10:18:21 发布 · 4.8k 阅读 · 3 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue.js #javascript
本文探讨了在Vue项目中使用Element UI的El-Input组件遇到的无法实时更新输入值的问题及解决方案。作者通过添加input事件并调用$forceUpdate()方法实现了实时更新，但原有校验失效。最终通过直接使用data中的数值进行判断解决了校验问题。 
<el-input  v-model="putNumber" autocomplete="off"  @input="changeInput"></el-input>

在这里插入图片描述
如图所示，无论怎么操作都只显示默认的数值，不能输入。
网上查资料后找到的解决办法是给一个input事件

<el-input v-model="putNumber" autocomplete="off" @input="changeInput"></el-input>
//强制更新
changeInput(e){
    this.$forceUpdate();
},

但是这样会出来一个问题，原有的校验不生效了。
在这里插入图片描述
在校验函数里debugger发现，传过来的value值一直是第一次的值，后面再怎么修改都是初始值。
在这里插入图片描述
处理方法就是，在校验函数里面不通过value值进行判断处理，直接拿data里面的数值做判断就解决啦~
在这里插入图片描述

macOS 上快速安装与配置JDK17的完整指南
最新发布
weixin_30872499的博客
03-28 3333
本文提供了在macOS上快速安装与配置JDK17的完整指南，包括下载安装包、配置环境变量、多版本切换及常见问题排查。JDK17作为长期支持版本，支持新特性和性能优化，是开发者的理想选择。
Vue+element ui中el-input无法输入问题
Coludidi的博客
07-22 1万+
el-select和el-input无法输入问题
el-input @input 修改v-model的值页面不生效
qq_41766081的博客
11-20 1765
test(val){ this.$nextTick(()=>{ this.model.value =val.replace(/[\W]/g,'') }) } 放在异步里完事 记录一下防止忘记
element el-input @change 无法触发，@input值出错问题
Kimser
07-21 3275
html <div id="app"> el-input <el-input v-model="input" @input="changeValue"></el-input> class el-input <div class="el-input"> <input type="text" @input="changeValue" v-model="input" class="el-input__inner"/> &l
element ui input输入不生效
weixin_45330738的博客
11-26 1835
element ui 优先处理input事件 所以应该在input上绑定修改值的事件或者方法
[vue+element-ui] form中输入框无法输入问题的解决方法
m0_51980089的博客
09-20 1万+
本文介绍了笔者在使用element-ui时无法在form中实现输入框功能，即“无法输入”问题的解决方法，亲测有效。
element-ui input输入框，校验不能输入中文和特殊字符，输入中文后，英文输不进去的问题
m0_66899315的博客
04-29 3483
element-ui input输入框，校验不能输入中文和特殊字符，输入中文后，英文输不进去的问题，以及特殊字符校验
解决：element ui表格表头自定义输入框单元格el-input不能输入问题
web-Danli的博客
11-14 2003
表格表头如图所示，有 40-45，45-50 数据，且以输入框形式呈现，现想修改其数据或点击右侧加号增加新数据编辑。结果不能输入，部分代码如下。Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据。结果不能输入，解决方法就是在表头自定义时将漏掉的。去获取数据，于是没有加上。
关于element-ui input输入框无法输入（即时显示）问题
smallNut的博客
04-15 4748
今天在使用element-ui组件写项目的时候，调用modal时遇到了Input框无法输入(实际为未即时显示) 总结了一下，触发此问题有以下触发条件 1.此输入框所在页面数据为二次加载(我这边刚好是引用子组件modal) 2.v-modal所绑定属性为复杂数据类型内属性 百度了下发现最便捷的方法是使用@input方法调用$forceDate()进行强制更新渲染 希望能帮到遇到这个坑的朋友，感谢...
element中 input赋值后无法再次输入值
socaicaicaicai的博客
11-19 3145
element中 input赋值后无法再次输入值方法一 ：$forceUpdate()方法二： $set 前言 ：工作需求中遇到一个监听选择框的值赋值对应input框的值,并支持input框的输入，在我监听赋值的之后采用的是向对象中添加属性的方法代码如下写入后input框不能输入了 ，并在赋值的input上绑定了 input事件监听去用forceUpdate()去更新也没有用，百度了才发现是我赋值的写法有问题，用forceUpdate() 去更新也没有用，百度了才发现是我赋值的写法有问题，用forceUp
Vue Element ui input无法输入问题原因及彻底解决
qq_23490959的博客
06-19 5739
【代码】Vue Element ui input无法输入问题原因及彻底解决。
解决el-input无法输入的问题和表单验证失败问题
qq_52126119的博客
03-20 6489
1、在el-input组件中使用v-model进行双向数据绑定 2、有时，你会发现我们进行了双向数据绑定了，但是el-input还是无法输入，我们就要使用绑定input事件，然后使用$forceUpdate方法强制刷新，这样子会解决我们el-input无法输入问题，但是这会带出一个新的问题，那就是表单无法进行验证等一些问题。 3、使用$forceUpdate方法强制刷新 ，表单验证失效（表单已经输入值，表单验证显示为空）， 由于此次表单是动态添加的，rules也需要动态添加
ElementUI el-input无法输入、修改、删除问题解决
weixin_52394141的博客
12-01 1万+
使用 el-input 这个标签时，我有些情况下在 el-input 是无法输入的，绑定的值动也动不了，删也删不掉，改也改不了，所以我做了以下的解决方法的统计，希望可以帮助到大家！造成的结果就是从后端传来的数据只能显示在输入框中，不能改也不能删，所以大家也可以考虑一下这个情况，当然表单的数据最好也不要使用this，虽然不知道原理，但是问题确实出在this上，知道的友友请在评论区分享哦~3.我们有些时候可能会忘记加入v-model属性，来绑定输入框中的值，如果忘记加入了，记得补上。
el-input实现不了输入的原因
weixin_44740072的博客
06-20 7943
el-input实现不了输入，页面渲染不上的原因
elementUi里的input输入框有时候无法输入的问题
JunVei的博客
08-16 6634
在输入框值改变的时候，调用this.$forceUpdate()强制刷新。最后找到了问题的根源，是有时候其实是获取到了数据，但是视图并没有更新。
el-input无法输入的问题和表单验证失败问题
weixin_53716093的博客
01-20 1万+
我们在做后台管理系统使用elementUI框架的时候会遇到一些问题，例如el-input无法输入问题，或者是使用了$forceUpdate后出现表单验证失败问题
Element表单中输入框无法输入
你的阿迁
06-13 2678
一开始我以为是响应式丢失的问题，然后在侦听器中通过set处理这个输入框的数据，这时候已经生效了，但是在多个下拉框多次选择数据及弹层打开关闭的情况下，依然存在之前不能输入的情况。：所遇到的问题是，在表单中有部分输入框是根据下拉框所选择的数据来显示和隐藏的，这时候就遇到有的输入框存在不能输入的问题（可以聚焦，但是输入无效）：在输入框的input事件中调用$forceUpdate() 进行强制刷新。
el-input 不能输入的解决办法
热门推荐
ErikChan的博客
08-11 2万+
问题背景 ElementUI 是国内前端工程师应该都听过或者使用过的前端框架， 不是使用简单，而且有着详细的文档和 API。然而，在使用 el-input 这个标签时，我遇到了一些困扰，有些情况下在 el-input 是无法输入的，就像是被禁止了一样，经过多番查找资料和查看官方文档，总结出以下解决办法，希望能给路过的前端工程师们一些参考 解决办法 场景一：标签嵌套太深 如果标签嵌套太深，会导致无法获取到 DOM，这是我们需要 $forceUpdate() 强制刷新，才可获取 <el-input
el-input输入框无法输入问题
Giraffe0615的博客
08-24 1万+
el-input输入框无法输入问题
el-input不能输入问题解决
passerby_lin的博客
06-13 2122
写项目的时候，el-input输入框是循环出来的，发现输入不上，排查发现是数据发生改变，视图未重新渲染。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值