原因

今天在使用element-ui时，el-input组件监听不了回车事件，如下代码没有想要的效果：

<el-input class="search-input" placeholder="请输入内容" v-model="searchText" @keyup.enter="search()"></el-input>

原因应该是element-ui自身封装了一层input标签之后影响了事件的监听，在element-ui里有很多因为自身封装了几层标签导致事件和样式无法按想要的效果呈现，遇到后可以在网页中查看dom结构分析原因。

解决

在事件后面加上.native：

<el-input class="search-input" placeholder="请输入内容" v-model="searchText" @keyup.enter.native="search()"></el-input>

vue使用element-ui的el-input监听不了回车事件的更多相关文章

  1. vue使用element-ui的el-input监听不了回车事件解决

    vue使用element-ui的el-input监听不了回车事件,原因应该是element-ui自身封装了一层input标签之后,把原来的事件隐藏了,所以如下代码运行是无响应的: <el-inp ...

  2. el-input监听不了回车事件

    vue使用element-ui的el-input监听不了回车事件,原因应该是element-ui自身封装了一层input标签之后,把原来的事件隐藏了,所以如下代码运行是无响应的: <el-inp ...

  3. JS移动端如何监听软键盘回车事件

    移动端经常项目中会有搜索之类的功能,一般实现的是按搜索按钮进行搜索,如果要像PC端一样实现按回车键进行搜索该怎么实现呢? 方法很简单,就是在搜索框的input外面套一个form标签  注意点:form ...

  4. 15.vue使用element-ui的el-input监听不了回车事件

    问题描述: 使用vue.js 2.0发现,el-input的绑定回车事件用不了 原因: el-input封了一层,直接@keyup.enter是用不了的 例如: <el-input type=& ...

  5. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  6. vue问题三：element ui的upload组件上传图片成功和移除事件

    element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...

  7. vue使用element-ui的el-input监听不了键盘事件解决

    vue使用element-ui的el-input监听不了键盘事件,原因应该是element-ui自身封装了一层div在input标签外面,把原来的事件隐藏了,所以如下代码运行是无响应的: <el ...

  8. vue 定义全局函数，监听android返回键事件

    vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...

  9. ButtonAddListener监听按钮点击事件

    ButtonAddListener监听按钮点击事件 using UnityEngine; using System.Collections; using UnityEngine.UI; using U ...

随机推荐

  1. 来一个使用sysbench测试cpu性能的简单脚本

    #!/bin/bash for ((i=1; i<16; i++)); do sysbench cpu run --cpu-max-prime=10000 --threads=4 --time= ...

  2. Java 骚操作--生成二维码

    https://www.cnblogs.com/lsy131479/p/8808172.html

  3. C++ 复制构造函数 与 赋值运算符

    在C++中,将一个对象赋给另外一个对象,编译器将提供赋值运算符的定义. 有两种情况,下面假设catman是Monster的一个实例 第一种:初始化 Monster golblen= catman; 第 ...

  4. JavaScript 匿名函数

    转载自:https://www.cnblogs.com/ClareZjy/p/6365891.html   零:介绍 匿名函数的基本形式为(function(){...})(); 前面的括号包含函数体 ...

  5. [转] whistle--全新的跨平台web调试工具

    whistle是基于Node实现的跨平台web调试代理工具,类似的工具有Windows平台上的Fiddler+Willow,基于Java实现的Charles,及公司同事基于Node实现的Livepoo ...

  6. 【LGR-052】洛谷9月月赛II（加赛）

    题解: 没打... ab题满世界都过了应该没什么意思 c题是个比较有意思的思维题(先看了题解才会的...) 我们考虑这么一件事情 没钥匙的人出门后 门一定是开着的 他进来的时候,门一定是开着的 其他时 ...

  7. jQuery选择器总结 jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法

    新年第一编文章 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法   $("#myELement")    选择id值等于myElement的元素,id值 ...

  8. python全栈开发day69-cookie、session

    一.ORM回顾 1. 内容回顾 1. Django中使用ORM连接MySQL的步骤: 1. 创建数据库 2. 告诉Django连接哪个数据库 在settings.py中设置数据库相关的链接信息 3. ...

  9. 没有IDE的日子

    没有QT Creator,没有VS2008,没有Eclipse,也没有KDevelop,忘掉一切IDE. 好吧,现在我只有Vim了,可我跟Vim不熟. Vim魅力四射,光芒万丈,高高在上,她就是传说中 ...

  10. ArcGIS 10开发迁移策略（待续）

    1.更改 ESRI.ArcGIS.ADF 程序集 ArcGIS 10 中, ADF 程序集中的功能被分散到不同的程序集中,如果将 ArcGIS 9.3 下 开发的自定义组件迁移到 ArcGIS 10 ...