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输入框输入不了内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue-drag-resize 拖拽缩放插件的使用(简单示例)

    字幕 <div id="lBox" style="background-color: #D7E9F5;" :style="{'height': parentHeight + 'px', 'width': parentWidth + 'px'}"> <drag-resize v-for="(rect,index) in texts" style="overflow: hidden;" :w=

  • vue中如何禁止input框和textarea编辑

    目录 如何禁止input框和textarea编辑 第一种方法 第二种方法 说说input无法输入原因 如何禁止input框和textarea编辑 在我们开发项目的时候,有时候我们不希望用户对我们的页面进行操作,尤其是输入框之类的,这时候我们需要设置一下 第一种方法 <input type="text" v-model="ConList.title" style="width: 100%;outline: none;height: 100%"

  • vue-drag-resize与输入框/文本框冲突问题

    目录 vue-drag-resize与输入框/文本框冲突 vue-drag-resize插件文档中提供的解决办法 解决多输入框/文本框冲突 vue-drag-resize拖拽组件的简单使用 总结 vue-drag-resize与输入框/文本框冲突 拖拽是前端使用较为频繁的功能了,当我们使用vue-drag-resize插件进行拖拽功能实现时,发现它和输入框或文本框有冲突,输入框/文本框无法输入. 今天主要说怎么去解决该问题. 在测试过程中,发现出现该问题的原因是输入框的焦点事件和拖拽的点击事件冲

  • vue表单验证之禁止input输入框输入空格

    vue表单验证之禁止input输入框输入空格

    测试小姐姐让输入框不允许输入空格,安排. 刚开始用的下面这个方法,因为我是电脑端f12的情况下调试移动端,所以下面这个方法可以实现禁止输入空格,于是就打包测试上线了,上线后才发现真机中不支持,应该是pc端和移动端事件不一样,所以如果你是pc端,可以使用下面这个方法. input上添加下方代码(我用的vant也一样,包括elemenui等) @keydown.native="keydown($event)" methods中写入下方代码 methods:{ // 禁止输入空格 keydo

  • vue 限制input只能输入正数的操作

    在某些项目中 input 框只能输入数字,可以用以下办法: 先在标签上绑定上 @input 事件来监听标签的值变化,通过正则来改变输入的值. <input class="keep_input" v-number-only style="width:35px" v-model="scope.row.fileOrder" @input="scope.row.fileOrder = Number($event.target.value.

  • 解决vue项目input输入框双向绑定数据不实时生效问题

    我就废话不多说了,大家还是直接看代码吧~ <input type="text" maxlength="11" placeholder="请输入联系人电话" v-model="form.phone" /> 这样的输入框,绑定的是data中的form对象上的phone字段. 在mounted钩子函数里边写: this.form.phone = '1888888888'; 这样在页面上时候不会随着输入框值改变而改变. 解

  • vue原生input输入框原理剖析

    目录 正文 v-model 正文 首先我们来看一段代码: <input value="value"> 这里是一个原生的input输入框,每一个原生的输入框都会有一个value的属性来用于存储用于输入的最新的数据. 如果我们想要获取到这个值我们可以通过input.target.value或者通过$event.target.value来获取这个存储的值. 只要用户输入了数据,那么此时input标签就会将输入的数据放到这个value中(新数据会覆盖旧数据,所以我们获取到的都是最新

  • vue实现Input输入框模糊查询方法

    本文实例为大家分享了vue实现Input输入框模糊查询方法的具体代码,供大家参考,具体内容如下 原理:原生js的indexOf() 方法,该方法将从头到尾地检索数组,看它是否含有对应的元素.开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时).如果找到一个 item,则返回 item 的第一次出现的位置.开始位置的索引为 0. 如果在数组中没找到指定元素则返回 -1. 下面先看示例: 搜索前: 搜索后: 实现方法: methods:{ // 点击搜索工程 search

  • vue 设置 input 为不可以编辑的实现方法

    我用最笨的方法,先实现功能先,用两个input,一个可以编辑,一个不可以编辑,失去焦点后隐藏可以点击的那个,点"编辑"时,显示可以编辑的那个input <div class="edit-item"> <input type="text" id="group-name" v-model="groupName" class="edit-input" disabled v-s

  • Angular组件拿不到@Input输入属性问题探究解决方法

    目录 区别一 区别二 区别三 总结 我需要给一个Component设置一个输入属性 @Input,好了,直接上代码,没有什么难度. 原代码是这样的: @Component({ selector: 'my-menu', templateUrl: './main-menu.widget.html' }) export class MyMenuWidget { data: any[]; ... constructor(...) { this._changesSubscription = this._s

  • IOS开发中键盘输入屏幕上移的解决方法

    在IOS开法中经常会遇到键盘遮挡屏幕的事情(比如输入账号密码验证码等等),就使得原本都不大的屏幕直接占了一半甚至更多的位置,这倒无所谓,关键是挡住了下面的按钮.这样的话按钮的事件也就触发不了,最好的解决办法就是当输入这些信息的时候让整个屏幕上移一个键盘的位置,或者上移到指定的位置. 首先一般输入的话都用的是UITextField,所以要监听用户什么时候开始输入和什么时候结束输入,直接设置代理代理就行了,要遵受 UITextFieldDelegate协议. //遵循协议 @interface Vi

  • vue下history模式刷新后404错误解决方法

    本文介绍了vue下history模式刷新后404错误解决方法,分享给大家,具体如下: 官方说明文档: https://router.vuejs.org/zh/guide/essentials/history-mode.html 一. 实测 Linux 系统 Apache 配置: 更改站点配置文件即可,我这里在 Directory 标签后面添加了官方给的五行配置 <VirtualHost *:80> #Created by linvic on 2018-05-24 Serveradmin 674

  • Mac OS X 下 IntelliJ IDEA、jEdit 等 Java 程序中文标点输入无效的完美解决方法

    Mac OS X 下基于 Java 的程序(如 IntelliJ IDEA.jEdit 等)会出现中文标点输入无效的问题,在中文输入法状态,可以输入中文字,但输入中文标点最后上去的是英文标点.查阅了相关资料,原来这是 Java 自己的 bug.从 Java 8u51 版本开始就出现了这个 bug,一直到现在最新的 Java 8u72 仍然如此,但是老版本 Java 8u45 是没有这个问题的.所以,可以采取变通的方法,在 Mac OS X 上同时装一个老版本的 JDK 8u45,不会影响已经安装

随机推荐