返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue使用element-ui的el-input监听不了回车事件怎么办
  • 565
分享到

vue使用element-ui的el-input监听不了回车事件怎么办

2024-04-02 19:04:59 565人浏览 安东尼
摘要

小编给大家分享一下Vue使用element-ui的el-input监听不了回车事件怎么办,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一

小编给大家分享一下Vue使用element-ui的el-input监听不了回车事件怎么办,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

原因

今天在使用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频道!

--结束END--

本文标题: vue使用element-ui的el-input监听不了回车事件怎么办

本文链接: https://lsjlt.com/news/75446.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue使用element-ui的el-input监听不了回车事件怎么办
    小编给大家分享一下vue使用element-ui的el-input监听不了回车事件怎么办,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一...
    99+
    2024-04-02
  • Vue的addEventListener()监听事件怎么使用
    本篇内容介绍了“Vue的addEventListener()监听事件怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、语法eleme...
    99+
    2023-07-04
  • 使用layui监听器监听select下拉框,事件绑定不成功怎么办
    这篇文章主要为大家展示了“使用layui监听器监听select下拉框,事件绑定不成功怎么办”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“使用layui监听器监听...
    99+
    2024-04-02
  • vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效怎么办
    小编给大家分享一下vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效怎么办,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一...
    99+
    2024-04-02
  • vue使用$emit时父组件无法监听到子组件事件怎么办
    这篇文章主要介绍vue使用$emit时父组件无法监听到子组件事件怎么办,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!vue使用$emit时,父组件无法监听到子组件的事件的原因是$em...
    99+
    2024-04-02
  • thinkphp的事件绑定、监听和订阅怎么使用
    这篇文章主要介绍了thinkphp的事件绑定、监听和订阅怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇thinkphp的事件绑定、监听和订阅怎么使用文章都会有所收获,下面我们一起来看看吧。事件是什么事件...
    99+
    2023-06-30
  • Vue引用第三方datepicker插件无法监听datepicker输入框的值怎么办
    小编给大家分享一下Vue引用第三方datepicker插件无法监听datepicker输入框的值怎么办,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我...
    99+
    2024-04-02
  • VUE使用ElementUI下拉框@change事件数据不回显怎么解决
    这篇文章主要介绍了VUE使用ElementUI下拉框@change事件数据不回显怎么解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇VUE使用ElementUI下拉框@change事件数据不回显怎么解决文章都...
    99+
    2023-07-05
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作