vue el-input输入框输入不了的解决方法
一、问题
1.今天写代码遇到了一个很奇葩的问题：写了很多个输入框，其他输入框都没有问题，就最后一个单独处理的有问题，输入框里面输入不了东西。着实不明白为什么，一遍又一遍抱怨，重复输入，里面还是除了原有的值什么都输不了。
除了原有的3,什么都输不了
二、解决方法
1.用vue dev-tools审查了才发现这个输入框无论输入什么，value值都是不变化，尽管 也触发了input事件（和html没有关系）
html的逻辑也完全相同，定义的对象的value和v-model绑定
<!-- 输入框 -->
<template v-if="item.type === 'input'">
<el-input
class="col"
:id="key"
v-model="item.value"
:clearable="item.inputClearable"
@input="handleInput($event, item)"
></el-input>
</template>
输入了，但是 value不变
输入后，value实时变化
2.仔细比较两个地方有什么不同，好像也没有什么区别，如图2-1所示。
终于突发奇想，看到了下面没有reactive，可能是响应性丢失（根本原因）了。
图2-1 两段声明，也没有特殊逻辑
3.于是在下面的声明上也加上了reactive，竟然好了，可以输入了！！！
三、总结
1.天哪，我也是没有料到竟然是因为响应式丢失，导致无法输入的(value无法更新）；世界很大，无奇不有，掉进坑里很迷茫。
2.遇到输入框无法输入可以：
1）先检查html，查看input输入事件是否触发;触发了，则html是正确的
2）检查v-model绑定的值：必须是响应式的(在data选项中定义的，或是setup函数中用reactive或ref显示声明为响应式数据）
到此这篇关于vue el-input输入框输入不了解决的文章就介绍到这了,更多相关vue el-input输入框输入不了内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue+canvas实现移动端手写签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
本文主要介绍了vue关闭浏览器退出登录，一般都是根据根据beforeunload和unload这两个事件执行的。本文就详细的介绍一下如何实现，感兴趣的可以了解一下2021-12-12
vue3使用拖拽组件draggable.next的保姆级教程
做项目的时候遇到了一个需求,拖拽按钮到指定位置，添加一个输入框,这篇文章主要给大家介绍了关于vue3使用拖拽组件draggable.next的保姆级教程,需要的朋友可以参考下2023-06-06
vue组件通信的方式，这是在面试中一个非常高频的问题。其实Vue组件的通信方式除了props和 $emit还有很多，本文将对vue组件通信方式进行一下总结，感兴趣的可以学习一下2021-12-12
这篇文章主要为大家详细介绍了Vue3如何实现加载图片时添加一些动画效果,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下2023-10-10
这篇文章主要介绍了vue实现的上拉加载更多数据/分页功能,涉及基于vue的事件响应、数据交互等相关操作技巧,需要的朋友可以参考下2019-05-05
Vue出现did you register the component
这篇文章主要介绍了Vue出现did you register the component correctly?解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue组件传值(高级)、属性传值、反向传值、跨级传值实例详解
父组件通过属性传值给子组件，父组件修改数据后会刷新页面并重新传值给子组件，子组件可以修改父组件传的值并刷新自己的页面 但是并不会修改父组件中的值，这篇文章主要介绍了vue组件传值（高级）、属性传值、反向传值、跨级传值,需要的朋友可以参考下2022-09-09
这篇文章主要大家介绍了查看当前vue项目所需Node.js版本的方法,文章通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2023-11-11
使用elementUI table展开行内嵌套table问题
这篇文章主要介绍了使用elementUI table展开行内嵌套table问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最新评论