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 相关文章推荐
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
JavaScript动态插入script的基本思路及实现函数
Nov 11 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
Jquery把获取到的input值转换成json
May 15 jQuery
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 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+MySQL的聊天室设计
2006/10/09 PHP
php var_export与var_dump 输出的不同
2013/08/09 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
php自定义apk安装包实例
2014/10/20 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
初探js和简单隐藏效果的实例
2017/11/23 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
python迭代器的使用方法实例
2013/11/21 Python
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
解析Python中的__getitem__专有方法
2016/06/27 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
linux面试题参考答案(4)
2013/01/28 面试题
新闻发布会活动策划方案
2014/09/15 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
八达岭长城导游词
2015/01/30 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android
python入门学习关于for else的特殊特性讲解
2021/11/20 Python
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏