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 相关文章推荐
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