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 相关文章推荐
jquery弹出层类代码分享
Dec 27 Javascript
js中window.open打开一个新的页面
Aug 10 Javascript
jQuery知识点整理
Jan 30 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
Vue中正确使用jQuery的方法
Oct 30 jQuery
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
如何基于viewport vm适配移动端页面
Nov 13 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
PHP 读取文件内容代码(txt,js等)
2009/12/06 PHP
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
javascript每日必学之多态
2016/02/23 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
Python快速排序算法实例分析
2017/11/29 Python
Django跨域请求CSRF的方法示例
2018/11/11 Python
利用python实现AR教程
2019/11/20 Python
pandas DataFrame运算的实现
2020/06/14 Python
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
信息工程学院毕业生推荐信
2013/11/05 职场文书
大学本科生的个人自我评价
2013/12/09 职场文书
啦啦队口号大全
2014/06/16 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
学校隐患排查制度
2015/08/05 职场文书
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android
把77A收信机改造成收音机
2022/04/05 无线电