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


Posted in Javascript onJanuary 12, 2018

原因

今天在使用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监听不了回车事件的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
jquery中JSON的解析方式
Mar 16 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 Javascript
EasyUI Pagination 分页的两种做法小结
Jul 09 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 Javascript
Layer+Echarts构建弹出层折线图的方法
Sep 25 Javascript
JavaScript This指向问题详解
Nov 25 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 #Javascript
js 索引下标之li集合绑定点击事件
Jan 12 #Javascript
简单的Vue SSR的示例代码
Jan 12 #Javascript
详解如何在react中搭建d3力导向图
Jan 12 #Javascript
关于axios不能使用Vue.use()浅析
Jan 12 #Javascript
Vuex 进阶之模块化组织详解
Jan 12 #Javascript
动态Axios的配置步骤详解
Jan 12 #Javascript
You might like
php $_SERVER当前完整url的写法
2009/11/12 PHP
通过php快速统计某个数据库中每张表的数据量
2012/09/04 PHP
解析zend Framework如何自动加载类
2013/06/28 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
浅谈PHP的反射机制
2016/12/15 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
原生js实现日期联动
2015/01/12 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
js实现一键复制功能
2017/03/16 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
财务经理岗位职责
2013/11/09 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
MySQL Router的安装部署
2021/04/24 MySQL