elementUI中input框无法输入的问题及原因

最新推荐文章于 2024-04-22 18:54:35 发布
最新推荐文章于 2024-04-22 18:54:35 发布
阅读量1.3w 收藏 7
点赞数 5
分类专栏： vue element 文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guojin1212/article/details/106574438
版权
在使用ElementUI时遇到了新增记录时input框无法输入内容的异常情况。问题可能源于输入内容未正确渲染。解决方法包括监听input并手动渲染内容，以及注意因清空操作导致的prop绑定丢失问题，这会影响Rule对内容是否为空的判断。
摘要由CSDN通过智能技术生成

新增的时候input突然不能输入内容了

就是不显示内容
就是输入不进去
解决1.
猜想就是输入内容没渲染，这里用@input="change($event)"方法监听input输入，this.$forceUpdate()手动渲染

<el-input v-model="dataForm.listingNumber"@input="change($event)" placeholder="挂牌号" />

change (e) {
最低0.47元/天 解锁文章
大白兔学编程
关注
  • 5
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html页面input框输入不了,input框不能输入问题
weixin_30166291的博客
06-04 9363
input框不能输入问题今天在写程序设计登录页面的时候遇到了一个问题：输入框不能输入!就是我写着写着想测试一下功能，就发现输入框不能输入了。？？？还能出现这种问题？？就很疑惑，然后就搜了搜无法输入的原因。主要有如下情况：1. input框设置了readonly属性这个就很好理解了，readonly属性把input框设置成了只读，就不可以输入了eg:只读字段是不能修改的。不过，用户仍然可以使用 ta...
elementUi里面的el-input框有时候无法输入的问题
milijiangjun的博客
08-28 3066
今天在用element ui 的时候有一个text 输入框没办法输入值。 在添加可以，在修改就连光标也不能移动了。 如图 一度以为自己写的代码有问题，是自己绑定值的时候出现的绑定失误造成的。 但是经过排查后发现代码没有问题： <el-row> <el-col :span="8"> <el-form-item label="出版社名"> <el-input v-model="da
el-input实现不了输入的原因
weixin_44740072的博客
06-20 6891
el-input实现不了输入，页面渲染不上的原因
Vue3 element plus el-input 无法输入el-select不能切换 也不显示默认值
最新发布
m0_61840359的博客
04-22 355
根据上面的代码可以看出这个 el-form 的 ref 和 model 使用的是相同的 seedNumberForm 这造成了冲突 可能就导致数据匹配不到了 所以默认值也没有显示出来 切换或者输入的时候也切换不了，输入不成功 ref 和 model 不相同就可以了。但是这个问题在vue2中好像是没有的。个人观点，如有错误望纠正。
Vue Element ui input无法输入问题原因及彻底解决
qq_23490959的博客
06-19 4777
【代码】Vue Element ui input无法输入问题原因及彻底解决。
Element表单中输入框无法输入
你的阿迁
06-13 2246
一开始我以为是响应式丢失的问题，然后在侦听器中通过set处理这个输入框的数据，这时候已经生效了，但是在多个下拉框多次选择数据及弹层打开关闭的情况下，依然存在之前不能输入的情况。：所遇到的问题是，在表单中有部分输入框是根据下拉框所选择的数据来显示和隐藏的，这时候就遇到有的输入框存在不能输入的问题（可以聚焦，但是输入无效）：在输入框的input事件中调用$forceUpdate() 进行强制刷新。
elementUi里的input输入框有时候无法输入的问题
JunVei的博客
08-16 6263
在输入框值改变的时候，调用this.$forceUpdate()强制刷新。最后找到了问题的根源，是有时候其实是获取到了数据，但是视图并没有更新。
el-input无法输入的问题和表单验证失败问题
热门推荐
weixin_53716093的博客
01-20 1万+
我们在做后台管理系统使用elementUI框架的时候会遇到一些问题，例如el-input无法输入问题，或者是使用了$forceUpdate后出现表单验证失败问题
详解elementUI中input框无法输入的问题
11-21
最近发现别人项目中在输入密码的时候发现input框无法输入进去 ...到此这篇关于详解elementUI中input框无法输入的问题的文章就介绍到这了,更多相关element input无法输入内容请搜索软件开发网以前的文章或继续浏览下面
Vue ElementUI实现:限制输入框只能输入正整数的问题
11-19
在Vue和ElementUI框架下，实现输入框(input)只能输入正整数的需求，可以通过多种方式来达成。这里介绍四种不同的方法： ### 方法一：利用禁止按键的方法 此方法通过监听`keyup`事件来阻止用户输入非正整数的字符。...
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
10-17
然而，在实际使用过程中，开发者可能会遇到一些问题，比如输入建议空白或者上一次的输入建议会闪烁。本文将深入探讨这两个问题及其解决方案。 首先，问题一涉及到了Element-UI的`<el-autocomplete>`组件，这是一个...
ElementUI el-input无法输入、修改、删除问题解决
weixin_52394141的博客
12-01 1万+
使用 el-input 这个标签时，我有些情况下在 el-input 是无法输入的，绑定的值动也动不了，删也删不掉，改也改不了，所以我做了以下的解决方法的统计，希望可以帮助到大家！造成的结果就是从后端传来的数据只能显示在输入框中，不能改也不能删，所以大家也可以考虑一下这个情况，当然表单的数据最好也不要使用this，虽然不知道原理，但是问题确实出在this上，知道的友友请在评论区分享哦~3.我们有些时候可能会忘记加入v-model属性，来绑定输入框中的值，如果忘记加入了，记得补上。
el-input无法输入,输入不对
我是星星的博客
06-05 2520
在代码块中加入 @input="change($event)" 进行强制刷新，这样子会解决我们el-input无法输入问题，1、input输入框没有进行双向数据绑定，没有v-model。el-input输入框无法输入的问题？2、组件嵌套太深，无法读取。
关于vue3使用Element ui输入框无法输入的简单解决方法
u010518531的博客
07-04 1908
这应该是解决element ui输入框无法输入最简单有效的方法了。
解决el-input无法输入的问题和表单验证失败问题
qq_52126119的博客
03-20 2468
1、在el-input组件中使用v-model进行双向数据绑定 2、有时，你会发现我们进行了双向数据绑定了，但是el-input还是无法输入，我们就要使用绑定input事件，然后使用$forceUpdate方法强制刷新，这样子会解决我们el-input无法输入问题，但是这会带出一个新的问题，那就是表单无法进行验证等一些问题。 3、使用$forceUpdate方法强制刷新 ，表单验证失效（表单已经输入值，表单验证显示为空）， 由于此次表单是动态添加的，rules也需要动态添加
开发（bug）总结5-el-input无法输入的问题和表单验证失败问题(亲测有效)
Mr_LiuP的博客
10-20 3298
原因（可能）：网上查了很多都没有给出明确的解释，有的说可能是因为组件嵌套太深导致的，也有可能是组件本身有潜在bug。真实原因也没搞懂，有知道的同学可以告诉下。// this.$forceupdate() // 强制数据刷新之后, 验证失效, 改用 $set ,亲测有效。点击添加，表单内可输入用户名 和 用户姓名，但有时会偶发出现无法这两个input框里面无法输入内容。大部分无法输入的问题：基本都是没有进行v-model双向数据绑定，这个很好解决。
el-input无法进行输入以及el-radio触发了两次点击事件
weixin_44082271的博客
11-17 1980
记录使用elementUI的时候遇到的问题。例如：el_input无法进行输入、el-radio触发单次点击事件等。
element - ui 的el-input输入框无法输入的问题
weixin_42120767的博客
12-03 2924
一次在项目中，发现el-input无法输入，查阅了相关文档，发现可能是组件层级过深导致视图无法刷新。解决办法是在el-input上绑定@input="$forceUpdate" <el-input v-model.number="form.frm_order_no" placeholder="报损订单号" @input="orderNoChange"></el-input> orderNoChange() { this.$forceUpdate(); },
Vue+element ui中el-input无法输入问题
Coludidi的博客
07-22 1万+
el-select和el-input无法输入问题
elementui中，input框的值发生变化的事件
05-21
在 ElementUI 中，input 框的值发生变化时，可以通过监听 input 事件来捕获。例如： ```html <el-input v-model="inputValue" @input="handleInput"></el-input> ``` 其中，`v-model` 绑定了输入框的值，`@input` 监听了 input 事件，`handleInput` 是事件处理函数。当用户在输入框中输入内容时，会触发 `handleInput` 函数，可以在该函数中操作输入框的值或进行其他逻辑处理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值