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

js 中{},[]中括号,大括号使用详解

May 12 Javascript

学习JavaScript设计模式(策略模式)

Nov 26 Javascript

jQuery遍历DOM节点操作之filter()方法详解

Apr 14 Javascript

JS中的phototype详解

Feb 04 Javascript

jQuery实现鼠标跟随效果

Feb 20 Javascript

解决ionic和angular上拉加载的问题

Aug 03 Javascript

WebStorm ES6 语法支持设置&babel使用及自动编译(详解)

Sep 08 Javascript

Vue按需加载的具体实现

Dec 02 Javascript

浅谈vuejs实现数据驱动视图原理

Feb 23 Javascript

js中apply和Math.max()函数的问题及区别介绍

Mar 27 Javascript

JS实现点击拉拽轮播图pc端移动端适配

Sep 05 Javascript

JS实现骰子3D旋转效果

Oct 24 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迅雷、快车、旋风下载专用链转换代码

2010/06/15 PHP

PHP中使用memcache存储session的三种配置方法

2014/04/05 PHP

ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法

2014/08/08 PHP

PHP自定义图片缩放函数实现等比例不失真缩放的方法

2016/08/19 PHP

Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例

2017/09/20 PHP

JQuery中$.ajax()方法参数详解及应用

2013/12/12 Javascript

gridview生成时如何去掉style属性中的border-collapse

2014/09/30 Javascript

jQuery实现友好的轮播图片特效

2015/01/12 Javascript

使用Electron构建React+Webpack桌面应用的方法

2017/12/15 Javascript

Node.js 使用jade模板引擎的示例

2018/05/11 Javascript

angular6 填坑之sdk的方法

2018/12/27 Javascript

vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果

2019/04/08 Javascript

jquery 回调操作实例分析【回调成功与回调失败的情况】

2019/09/27 jQuery

浅谈vue单页面中有多个echarts图表时的公用代码写法

2020/07/19 Javascript

JavaScript事件委托实现原理及优点进行

2020/08/29 Javascript

在antd Table中插入可编辑的单元格实例

2020/10/28 Javascript

python使用sorted函数对列表进行排序的方法

2015/04/04 Python

python单例模式实例分析

2015/04/08 Python

在Pycharm中自动添加时间日期作者等信息的方法

2019/01/16 Python

python里dict变成list实例方法

2019/06/26 Python

使用Python画股票的K线图的方法步骤

2019/06/28 Python

PyTorch里面的torch.nn.Parameter()详解

2020/01/03 Python

PyCharm License Activation激活码失效问题的解决方法(图文详解)

2020/03/12 Python

安装python3.7编译器后如何正确安装opnecv的方法详解

2020/06/16 Python

class类在python中获取金融数据的实例方法

2020/12/10 Python

python中reload重载实例用法

2020/12/15 Python

美国知名奢侈美容品牌零售商：Cos Bar

2017/04/21 全球购物

意大利奢侈品购物网站：Deliberti

2019/10/08 全球购物

澳大利亚领先的亚麻品牌：Bed Threads

2019/12/16 全球购物

实习生的自我评价

2014/01/08 职场文书

民警个人对照检查剖析材料

2014/09/17 职场文书

四风问题对照检查材料

2014/09/22 职场文书

2015年环境整治工作总结

2015/05/22 职场文书

八年级语文教学反思

2016/03/03 职场文书

解决mysql的int型主键自增问题

2021/07/15 MySQL

Redis Stream类型的使用详解

2021/11/11 Redis