原因

今天在使用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. SQL Server Profiler的简单使用

    SQL Server Profiler可以检测在数据上执行的语句,特别是有的项目不直接使用sql语句,直接使用ORM框架的系统处理数据库的项目,在调试sql语句时,给了很大的帮助. 之前写了使用SQL ...

  2. fcagte.exe应用程序错误

    原文:What is Fcagte.exe and How To Fix It? Overview of Fcagte.exe What Is Fcagte.exe? Fcagte.exe is a ...

  3. [转] babel 教程

    在前端开发领域,浏览器兼容性问题从来不曾消失.除了 CSS,我们还要面对 JavaScript 的兼容性问题. 不同的浏览器讲着不同的 JavaScript 语言,不同的浏览器版本同样讲着不同的 Ja ...

  4. Chino的数列

    题解: 一道练代码能力的题目.. 首先很显然他是一道平衡树裸题 第5个操作是势能分析维护最大值最小值就可以了 另外设置虚点和noip2017队列那题一样(不过我只写过线段树) 具体细节: 1.内存池, ...

  5. Python_dict部分功能介绍

    字典是无序的 x.clear():清除所有元素 x.fromkeys():返回一个新的字典,使前面的key=value x.get():如果k不存在,默认返回一个值,如果存在,则返回存在的值 x.it ...

  6. linux实现自动检测进程是否存活的脚本

    可以在性能测试过程中.定期检测startAgent和nmon的状态 #!/bin/sh while true do pnmon=`ps aux | grep nmon | grep -v grep`; ...

  7. Python学习（七） —— 装饰器、迭代器、生成器

    一.装饰器(decorator) 1.装饰器的本质是闭包函数,作用:在不改变函数的调用方式的情况下,给函数的前后添加新的功能 #装饰器的固定结构 def warpper(func): #定义装饰器函数 ...

  8. hbase0.94.11版本和hbase1.4.9版本的benchamark区别

    1.起初使用ycsb对hbase进行benchmark,分别在100%写的情况下检测写性能:在100%读的情况下检测读的性能.实验数据如下: 2.新版本的habse写性能竟然不如老版本.!!!.于是我 ...

  9. 将程序sublime添加到右键菜单中

    新建wangzhaobo.bat复制一下代码, 粘贴保存,然后打开. @echo Off :START CLS echo *====================================== ...

  10. log4j快速入门

    转自:http://blog.csdn.net/yanwushu/article/details/7581255 1.引言 在应用程序中添加日志记录总的来说基于三个目的: .监视代码中变量的变化情况, ...