原因

今天在使用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. WARN conf.FlumeConfiguration: Could not configure sink sink1 due to: No channel configured for sink: sink1 org.apache.flume.conf.ConfigurationException: No channel configured for sink: sink1

    1.错误如下所示,启动flume采集文件到hdfs案例的时候,出现如下所示的错误: 大概是说No channel configured for sink,所以应该是sink哪里配置出现了错误,百度了一 ...

  2. C#学习-静态

    有提过类的成员,有字段.属性.方法和构造函数等,也可以使用static关键字将其声明为类的静态成员. 静态成员属于类级别的概念,它不属于类的实例. 可以使用static关键字来声明静态字段,静态字段与 ...

  3. grails2.3.3发布了-【grails】

    grails2.3.3发布了,在grails2.3.2中默认方式fork模式下无法运行的BUG也解决了. 需要做的相关修改为修改BuildConfig.groovy: build ':tomcat:7 ...

  4. day10.函数进阶

    函数的命名空间 从python解释器开始执行之后,就在内存中开辟了一个空间,每当遇到一个变量的时候,就把变量名和值之间的对应关系记录下来. 但是当遇到函数定义的时候解释器只是象征性的将函数名读入内存, ...

  5. 011 pandas的常见操作

    一:对索引进行操作 1.reindex重新索引 pandas提供了一个方法来创建一个适应新索引的新对象. Series通过调用reindex方法会根据新的索引顺序重新排序,如果新的索引中存在原索引不存 ...

  6. Badboy录制Jmter脚本

    提纲 1.特性和用途 2.下载和安装 3.界面介绍 4.录制脚本(注意:badboy默认是打开就开始录制,需要在step双击后进行取消默认设置) 5.添加断言(参数化设置,注意:badboy默认只运行 ...

  7. lvs dr 模型配置详解

    前期准备: 两台服务器 note01(lvs服务器) note02(real sever) 1 首先在note01配置子网卡: ifconfig eth0: :2意思是eth0的子接口,随便一个数字就 ...

  8. A - Character Encoding HDU - 6397 - 方程整数解-容斥原理

    A - Character Encoding HDU - 6397 思路 : 隔板法就是在n个元素间的(n-1)个空中插入k-1个板,可以把n个元素分成k组的方法 普通隔板法 求方程 x+y+z=10 ...

  9. antd + node.js + mongoose小总结

    最近开发太忙,都没时间更新博客,想通过这篇博客总结一下相关经验,以备后续能用到: 一.antd 1.onChange of undefined问题:可能是页面中表单取了相同的名称,也可能是在遍历时表单 ...

  10. SpringBoot使用缓存

    前言 我们都知道,一个程序的瓶颈通常都在数据库,很多场景需要获取相同的数据.比如网站页面数据等,需要一次次的请求数据库,导致大部分时间都浪费在数据库查询和方法调用上,这时就可以利用到缓存来缓解这个问题 ...