原因

今天在使用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. 使用docker方式安装etcd集群，带TLS证书

    网上文档也多,安装的时候,还是踩了几个坑. 现在作一个安装记录吧. 1,先作自签名的证书ca-csr.json(为了和k8s共用根证书,可能将信息调为k8s). { "CN": & ...

  2. spring+redis的集成，redis做缓存

    1.前言 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.我们都知道,在日常的应用中,数据库瓶颈是最容易出现的 ...

  3. python全栈开发day71-ajax

    一.django中间件 1 中间件的用处(针对请求和响应做全局的操作时) 可以做登录验证 访问限制 2. 自定义中间件,五个方法和三个要点 三个要点: 1.执行时间和执行顺序 2.参数 3.返回值 1 ...

  4. rxjs简单入门

    rxjs全名Reactive Extensions for JavaScript,Javascript的响应式扩展, 响应式的思路是把随时间不断变化的数据.状态.事件等等转成可被观察的序列(Obser ...

  5. 环境变量误删path找回方法与mysql基础命令

    环境变量误删path找回方法用户path:%USERPROFILE%\AppData\Local\Microsoft\WindowsAppsWin+R 输入regedit 打开注册表(开始-运行里输入 ...

  6. 爬虫3 requests基础之 乱码编码问题

    import requests res = requests.get('http://www.quanshuwang.com') res.encoding = 'gbk' print(res.text ...

  7. Scala-Unit-1-概述及安装

    一.Scala简介 官网:www.scala-lang.org Scala语言很强大,它集成了面对对象和函数式编程的特点,并且运行在JVM(Java Virtual Machine)上,即必须安装jd ...

  8. 2501 矩阵距离 （bfs）

    描述 给定一个N行M列的01矩阵 A,A[i][j] 与 A[k][l] 之间的曼哈顿距离定义为: dist(A[i][j],A[k][l])=|i-k|+|j-l| 输出一个N行M列的整数矩阵B,其 ...

  9. python实现杨辉三角

    刚刚学python,原来用c++,Java很轻松实现的杨辉三角,现在用python实现,代码是少了,理解起来却不容易啊. 这里主要用到的Python的生成器. 我们都知道Python有列表解析功能,根 ...

  10. vue(v-html)和scss的使用问题

    <!--temp是一组p标签--> <div class="lyric-container" v-html="temp"></di ...