VUE3.0+element-plus el-input无法输入

最新推荐文章于 2024-10-02 14:27:44 发布
最新推荐文章于 2024-10-02 14:27:44 发布
阅读量4.6k 收藏
点赞数
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43267086/article/details/119174582
版权

第一次遇到input不能输入的情况，可以获取到光标，但不能输入任何东西，网上查阅了一些资料，以及别人的解决方案

官方文档在input输入组件中有这样的提示：在这里插入图片描述

 

解决方案

  1. 处理input事件并更新组件的绑定值；
  2. 使用v-model。

 

详情参考链接：https://blog.csdn.net/weixin_45883730/article/details/108779686 

 

城市猎人吴泪
关注
Vue3.2 + Element-Plus 二次封装 el-table（Pro版）
sybh的博客
11-17 1456
ProTable 组件目前已是2.0版本🌈，在1.0版本中大家提出的问题与功能优化，目前已经得到优化和解决。😀 欢迎大家在使用过程中发现任何问题或更好的想法，都可以在下方评论区留言，或者我的开源项目 issues 中提出。如果你觉得还不错，请帮我点个小小的Star🧡🤔前提：首先我们在封装 ProTable 组件的时候，在不影响 el-table 原有的属性、事件、方法的前提下，然后在其基础上做二次封装，否则做得再好，也不太完美。🧐。
vue3+element-plus 封装表单
weixin_50041614的博客
09-05 2537
vue3+element-plus 封装表单
vue3+element-plus 表单输入框无法输入
veceny的博客
03-12 4408
【代码】vue3+element-plus 表单输入框无法输入。
【踩坑笔记】vue3 element-plus el-input 无法输入问题
soladuor
10-08 8247
原因是 el-form 的 v-model="loginForm" ref="loginForm" 在vue3中值不能相同。把ref去掉或者改名即可。
vue3中el-input在form表单按下回车刷新页面
最新发布
Front小思的博客
10-02 506
在input框中点击回车之后不是调用我写的回车事件，而是刷新页面！
vue3中el-input输入无效的原因之一：reactive赋值响应式问题
dlchgg的博客
03-07 1186
reactive的数据不能这么赋值，会破坏响应性。
vue3 element plus el-input 无法输入问题
supming1的专栏
11-11 9391
最近用vue3 elementplus进行开发，发现el-input无法输入，代码如下： <template> <el-card> <template #header> <div class="card-header"> <el-form ref="searchForm" :model="searchForm" label-width="80px"> <el-form-it...
VUE+element-ui使用中的坑（一）——el-input无法输入
热门推荐
weixin_45883730的博客
09-24 4万+
情况说明 问题描述 无论是单独的el-input输入框，还是把它们放在表单项中，有时都会出现无法输入的问题：虽然鼠标可以点击此输入框，但还是没有办法显示出键盘的输入。 前人文章 在CSDN上有看到一些前辈的说法，比如： 1.在el-input标签中添加@input=“change($event)”： 2.去实现此change(e)方法，效果为强行刷新视图： change (e) { this.$forceUpdate() }, 但是又有很多朋友反馈会有表单验证失效的问题等等。 解决措施
Vue3+element-plus+axios 综合小案例
09-26
例如，使用<el-table>来展示数据，<el-dialog>来实现弹出对话框，<el-form>和<el-input>用于表单输入等。 axios是一个广泛使用的JavaScript库，用于在浏览器和node.js中发送HTTP请求。在Vue3应用中，axios常用来与...
vue+element-ui实现表格编辑的三种实现方式
10-17
在使用Vue.js框架结合Element UI组件库开发Web应用时，表格编辑功能的实现是经常遇到的需求之一。本文介绍了使用vue与element-ui实现表格编辑的三种不同方式，具体包括表格内部显示和编辑切换、通过弹出另外的表格...
Vue3 + Vite+ Element-Plus + TypeScript 搭建系统
weixin_45044818的博客
12-04 1443
一种新的专门的编程语言，编译后成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏览器的兼容问题，让CSS更加简洁，适应性更强，可读性更佳，更易于代码的维护等诸多好处。创建 variables.scss 变量文件，注意规范变量以 $ 开头 @styles/variables.scss。上面导出的scss全局变量在ts不生效的，需要创建一个以.module.scss 结尾的文件。添加scss @styles/normalize.scss。vite导入variables.scss。
详解elementUI中input框无法输入的问题
11-21
最近发现别人项目中在输入密码的时候发现input框无法输入进去 键盘都快敲坏了还是无法输入 通过各种排查、还是无法解决这个问题 后面无意中发现 elementUI中@input事件可以拿到当前的输入的值 问题找到了 视图没有更新的问题 那么怎么解决了  刷新通过this.$forceUpdate() 可以解决这个问题 这样的话这个问题就解决了  原因可能是由于组件嵌套太深（不是很了解为啥出现这个问题有没有大神解释一波 ） 到此这篇关于详解elementUI中input框无法输入的问题的文章就介绍到这了,更多相关element input无法输入内容请搜索软件开发网以前的文章或继续浏览下面
Vue3 Element plus的el-input组件无法输入问题
SomeBodyL的博客
08-07 408
一个Vue3项目，在写登录界面的时候，使用了Element Plus的el-input组件，发现无法输入，以下是源码。将 :model 改为 v-model 就可以了。
vue3中使用element puls ui组件库的el-form,无法输入的问题
Start的小笔记
12-30 1619
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">
Vue3组件NaiveUI n-input无法输入的问题
Lanmixixi的博客
01-18 967
今天在使用NaiveUI开发的时候用到了n-input组件，但是在使用时发现输入框中无法输入文字。经排查后发现，我把v-model:value写成:value了，改回来后即可正常使用。v-model = " " 是v-model:value的缩写。v-bind 数据只能从data流向浏览器页面，单向绑定。:value 是v-bind:value的缩写。还是自己概念不清的问题，写下这篇文章提醒自己。v-model:value=" "双向绑定。
vue3 input无法输入怎么解决？
xuanqinzi的博客
07-26 551
vue3在子组件里嵌套子组件，进入该组件后里面的input和select都无法输入和选择的，这时候点击跳转其他页面时其他的页面input全都失效了无法输入，请问大佬们怎么解决，我看网上很多说给input使用change事件在执行this.$forceUpdate()，试过了没用，连change事件都不会执行。
＜el-form＞下的输入框无法输入内容，element-plus踩坑记录
weixin_43951592的博客
05-25 619
element-plus, vue3踩坑记录
vue3 elementui typescript input输入框不能输入的问题
qq_40895460的博客
04-29 1478
网上有很多教程，但是都是要么elementui，要么typescript缺一个，所以都无效，这应该是全网最全，最简约的方法。 废话不多说，直接上代码 vue部分 <el-input v-model="form.name" @input="change($event)" placeholder="挂牌号" /> JS部分 <script lang="ts"> import { defineComponent, reactive } from "vue"; exp.
关于vue3使用Element ui输入框无法输入的简单解决方法
u010518531的博客
07-04 2029
这应该是解决element ui输入框无法输入最简单有效的方法了。
vue3+element-plus，el-input输入框限制输入1-100的数字，其余不可输入
07-14
您可以使用 Vue3 和 Element Plus 的组合来实现输入框限制输入1-100的数字，其余不可输入的功能。以下是一个示例代码： ```vue <template> <el-input v-model="inputValue" @input="handleInput"></el-input> </template> <script> export default { data() { return { inputValue: '', }; }, methods: { handleInput(value) { // 移除非数字字符 let newValue = value.replace(/[^\d]/g, ''); // 限制输入范围为1-100 if (newValue === '' || (parseInt(newValue) >= 1 && parseInt(newValue) <= 100)) { this.inputValue = newValue; } }, }, }; </script> ``` 上述代码中，我们使用了 `el-input` 组件来显示和获取用户输入的值。在 `handleInput` 方法中，我们首先使用正则表达式将非数字字符移除，然后判断新的值是否为空或在1-100的范围内。如果是，则更新 `inputValue` 的值，否则不更新。 通过以上代码，您可以实现在输入框中限制输入1-100的数字，其余字符将无法输入。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值