编程 Javascript

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

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

- Author -

无所事事者爱嘲笑

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript 学习笔记（九）call和apply方法

Jan 11 Javascript

Javascript 加载和执行-性能提高篇

Dec 28 Javascript

JQuery 中几个类选择器的简单使用介绍

Mar 14 Javascript

JS+flash实现chrome和ie浏览器下同时可以复制粘贴

Sep 22 Javascript

原生js实现移动开发轮播图、相册滑动特效

Apr 17 Javascript

javascript实现网页字符定位的方法

Jul 14 Javascript

JS实现表单中checkbox对勾选中增加边框显示效果

Aug 21 Javascript

jQuery中使用animate自定义动画的方法

May 29 Javascript

react-native fetch的具体使用方法

Nov 01 Javascript

详解微信小程序-扫一扫 wx.scanCode() 扫码大变身

Apr 30 Javascript

Vue使用lodop实现打印小结

Jul 06 Javascript

vue实现可以快进后退的跑马灯组件

Apr 08 Vue.js

微信小程序实现的涂鸦功能示例【附源码下载】

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实现Ftp用户的在线管理

2012/02/16 PHP

通过PHP的内置函数，通过DES算法对数据加密和解密

2012/06/21 PHP

php+html5使用FormData对象提交表单及上传图片的方法

2015/02/11 PHP

PHP实现指定字段的多维数组排序函数分享

2015/03/09 PHP

Laravel SQL语句记录方式(推荐)

2016/05/26 PHP

php无法连接mysql数据库的正确解决方法

2016/07/01 PHP

curl 出现错误的调试方法(必看)

2017/02/13 PHP

解决laravel session失效的问题

2019/10/14 PHP

jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码

2010/03/21 Javascript

基于jquery中children()与find()的区别介绍

2013/04/26 Javascript

javascript中解析四则运算表达式的算法和示例

2014/08/11 Javascript

js防止DIV布局滚动时闪动的解决方法

2014/10/30 Javascript

js实现类似MSN提示的页面效果代码分享

2015/08/24 Javascript

基于HTML5上使用iScroll实现下拉刷新，上拉加载更多

2016/05/21 Javascript

jQuery针对input的class属性写了多个值情况下的选择方法

2016/06/03 Javascript

js选择器全面解析

2016/06/27 Javascript

基于CSS3和jQuery实现跟随鼠标方位的Hover特效

2016/07/25 Javascript

webstorm添加vue.js支持的方法教程

2017/07/05 Javascript

Vue实现搜索和新闻列表功能简单范例

2018/03/16 Javascript

vue Treeselect下拉树只能选择第N级元素实现代码

2020/08/31 Javascript

[02:15]2015国际邀请赛选手档案IG.Ferrari 430

2015/07/30 DOTA

python清除字符串里非字母字符的方法

2015/07/02 Python

简单解析Django框架中的表单验证

2015/07/17 Python

Python 实现一个颜色色值转换的小工具

2016/12/06 Python

django 2.0更新的10条注意事项总结

2018/01/05 Python

Python基于高斯消元法计算线性方程组示例

2018/01/17 Python

Python cookbook（数据结构与算法）字典相关计算问题示例

2018/02/18 Python

对Python中class和instance以及self的用法详解

2019/06/26 Python

Python 爬虫的原理

2020/07/30 Python

美国珠宝店：Helzberg Diamonds

2018/10/24 全球购物

莫斯科隐形眼镜网上商店：Linzi

2019/07/22 全球购物

企业消防安全制度

2014/02/02 职场文书

社区居务公开实施方案

2014/03/27 职场文书

2014领导班子四风问题查摆思想汇报

2014/09/13 职场文书

2015年社区国庆节活动总结

2015/07/30 职场文书

mysql函数全面总结

2021/11/11 MySQL