原因

今天在使用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. 谷歌浏览器Software Reporter Tool长时间占用CPU解决办法

    什么是Software Reporter Tool Software Reporter Tool是一个Chrome清理工具,用于清理谷歌浏览器中不必要或恶意的扩展,应用程序,劫持开始页面等等.当你安装 ...

  2. win10 64 使用 visual studio 2017 搭建汇编开发环境

    转自http://blog.csdn.net/sinat_27382047/article/details/70339455 插件 vs2015的汇编语法高亮插件(安装就行)这玩意找了我很久= = h ...

  3. [转] 安装npm全局包提示权限不够

    方法1 sudo npm i -g npm 方法2 修改usr/local的权限.使用sudo有一个风险是安装包可能会运行自己的一些脚本,使sudo操作变的不可控,不安全.可以通过将/usr/loca ...

  4. CentOS6— Redis安装（转和延续）

    Part I. Redis安装(转载部分) 一.安装(官网地址 http://redis.io/download) wget http://download.redis.io/redis-stable ...

  5. Codeforces 666E E - Forensic Examination SA + 莫队 + 线段树

    E - Forensic Examination 我也不知道为什么这个复杂度能过, 而且跑得还挺快, 数据比较水? 在sa上二分出上下界, 然后莫队 + 线段树维护区间众数. #include< ...

  6. 012 pandas与matplotlib结合制图

    这里以后再补充. 1.折线图

  7. 060 SparkStream 的wordcount示例

    1.SparkStream 入口:StreamingContext 抽象:DStream 2.SparkStreaming内部原理 当一个批次到达的时候,会产生一个rdd,这个rdd的数据就是这个批次 ...

  8. Python enum 枚举 判断 key（键） 或者 value（值）是否在枚举中

    Python enum 枚举 判断 key(键) 或者 value(值)是否在枚举中 python 的基本用法请浏览:https://www.cnblogs.com/ibingshan/p/98564 ...

  9. Python traceback 模块，追踪错误

    Python traceback 模块,追踪错误 import traceback try: your code except: traceback.print_exc()

  10. Mybatis下collections使用pageHelper进行分页

    pageHelper在对mybatis一对多分页时造成查询总页数结果不对的情况. 可以做出如下修改: service层: public CommonResult worksList(String us ...