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 相关文章推荐
用js解决数字不能换行问题
Aug 10 Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 Javascript
JS中对Cookie的操作详解
Aug 05 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 Javascript
微信小程序实现多行文字滚动
Nov 18 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循环结构实例讲解
2014/02/10 PHP
php过滤敏感词的示例
2014/03/31 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
jQuery实现两列等高并自适应高度
2016/12/22 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
python中join()方法介绍
2018/10/11 Python
python 实现线程之间的通信示例
2020/02/14 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
Python日志器使用方法及原理解析
2020/09/27 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
粉红色的鲸鱼:Vineyard Vines
2018/02/17 全球购物
专科毕业生自我鉴定
2013/12/01 职场文书
物流管理毕业生自荐信范文
2014/03/15 职场文书
祖国在我心中演讲稿300字
2014/05/04 职场文书
端午节活动总结
2014/08/26 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
2016年少先队活动总结
2016/04/06 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python