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 的Document属性和方法集合
Jan 25 Javascript
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
js中return false(阻止)的用法
Aug 14 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
js逆向解密之网络爬虫
May 30 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 gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
js判断是否为ie的方法小结
2014/01/13 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
面包屑导航详解
2017/12/07 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
python实现斐波那契递归函数的方法
2014/09/08 Python
Python fileinput模块使用实例
2015/06/03 Python
使用Python的turtle模块画国旗
2019/09/24 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
Python与C/C++的相互调用案例
2021/03/04 Python
新锐科技Java程序员面试题
2016/07/25 面试题
实习教师自我鉴定
2013/12/09 职场文书
五一家具促销方案
2014/01/10 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
工会换届选举方案
2014/05/21 职场文书
死者家属慰问信
2015/03/24 职场文书
企业承诺书格式范文
2015/04/28 职场文书
Java 在线考试云平台的实现
2021/11/23 Java/Android
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL
MySQL 字符集 character
2022/05/04 MySQL
python 学习GCN图卷积神经网络
2022/05/11 Python