AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

成功 解决 @keyup.enter=“search()“ 在el-input 组件中不生效的问题

2024-08-15 1089
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这篇文章讨论了在Vue 3中使用Element UI的`el-input`组件时，`@keyup.enter="search()"`事件绑定不生效的问题，并提供了通过使用`.native`修饰符来解决这个问题的方法。

1、问题描述

在输入框中、输入内容、点击回车。没有效果
在这里插入图片描述
问题代码
在这里插入图片描述

2、问题解决思路

查看官网的解释说明：

要使用.native修饰符
在这里插入图片描述

3、问题解决

修改后的代码
在这里插入图片描述

修改后的效果
在这里插入图片描述

文章标签：
JavaScript
热爱技术的小郑
目录
相关文章
Yaiba123
|
数据格式
使用小技巧实现el-table组件的合并行功能，ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧，包括多列合并和单列合并的方法，并提供了相应的示例代码和运行效果。
Yaiba123
10742 46
使用小技巧实现el-table组件的合并行功能，ElementUI和ElementPlus都适用
TE-茶叶蛋
|
移动开发 JavaScript HTML5
el-input限制输入整数等分析
本文介绍了在Vue中限制el-input只能输入整数的几种方式，包括设置type为number，使用inputmode属性，自定义指令，计算属性，使用onafterpaste和onkeyup事件以及使用el-input-number的precision属性。每种方式都有其优缺点，可以根据实际需求选择合适的方式。比较建议用自定义指令的方式来实现。
TE-茶叶蛋
3786 0
el-input限制输入整数等分析
码喽的自我修养
|
JavaScript
elementUI/Plus 输入框按回车刷新页面分析与解决
elementUI/Plus 输入框按回车刷新页面分析与解决
码喽的自我修养
3624 1
elementUI/Plus 输入框按回车刷新页面分析与解决
探索云世界动手实践
|
JSON 缓存 小程序
微信小程序组件封装与复用：提升开发效率
本文深入探讨了微信小程序的组件封装与复用，涵盖组件的意义、创建步骤、属性与事件处理，并通过自定义弹窗组件的案例详细说明。组件封装能提高代码复用性、开发效率和可维护性，确保UI一致性。掌握这些技能有助于构建更高质量的小程序。
探索云世界动手实践
815 1
你挚爱的强哥
|
JavaScript
Vue父组件调用子组件的方法并传参的两种方式（用$refs.refName.functionName、window.function）
Vue父组件调用子组件的方法并传参的两种方式（用$refs.refName.functionName、window.function）
你挚爱的强哥
730 0
Vue父组件调用子组件的方法并传参的两种方式（用$refs.refName.functionName、window.function）
全栈弄潮儿
|
UED
【Vue2从入门到精通】一分钟让你学会vue2搜索关键词高亮
本文主要介绍了vue2实现搜索关键词高亮的方法，有需要的朋友可以借鉴参考，祝大家多多进步，早日升职加薪。
全栈弄潮儿
723 0
【Vue2从入门到精通】一分钟让你学会vue2搜索关键词高亮
Li370234940
|
JavaScript 前端开发 索引
JS 删除数组元素（ 5种方法 ）
JS 删除数组元素（ 5种方法 ）
Li370234940
1534 1
朝阳39
|
存储
el-tree 动态指定默认选中节点
el-tree 动态指定默认选中节点
朝阳39
1487 6
朝阳39
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
朝阳39
4184 1
朝阳39
vue2 插槽（默认插槽 slot 、具名插槽 v-slot 、作用域插槽 slot-scope -- 插槽传值 ）
vue2 插槽（默认插槽 slot 、具名插槽 v-slot 、作用域插槽 slot-scope -- 插槽传值 ）
朝阳39
4025 1

热门文章

最新文章

  • 1
    ESXi主机 查看硬盘健康信息（SMART）
  • 2
    展望云计算新时代数据库计算力的进化
  • 3
    开发函数计算的正确姿势 —— 安装第三方依赖
  • 4
    技术好文共享：电脑睡眠（sleep）和休眠（Hibernate）的区别，以及休眠功能的设置
  • 5
    Go 优秀库推荐 - 命令行工具 cobra
  • 6
    知乎高颜值图片抓取到本地(Python3 爬虫.人脸检测.颜值检测)
  • 7
    go4--break,continue + 标签
  • 8
    爱说说技术原理:与TXT交互及MDataTable对Json的功能扩展(二)
  • 9
    WPF 小示例
  • 10
    Linux黑客大曝光推荐工具
  • 1
    企业级多模态分析计算引擎选型：阿里云 AnalyticDB MySQL 统一分析平台方案
    93
  • 2
    PB 级海量数据需要实时分析，应该选择什么数仓产品？阿里云 AnalyticDB MySQL 是首选
    59
  • 3
    AI Agent 混合检索选型：阿里云 AnalyticDB MySQL 向量+全文一站式方案
    81
  • 4
    数据仓库物化视图是什么？阿里云 AnalyticDB MySQL 实时物化视图最佳实践
    44
  • 5
    Hudi 湖仓一体架构：阿里云 AnalyticDB MySQL 原生集成最佳实践
    65
  • 6
    RDS Agent可观测能力正式邀测！全面支持Qoder、Codex、Claude Code、OpenClaw等主流研发Agent
    78
  • 7
    阿里云短信服务 Skill 发布：Agent 一句话搞定群发
    126
  • 8
    游戏行业十亿级用户行为分析：阿里云 AnalyticDB MySQL 解决方案
    51
  • 9
    报表查询太慢？阿里云 AnalyticDB MySQL 帮你实现秒级报表加速
    48
  • 10
    阿里云 AnalyticDB MySQL 免运维实践：分析型数据库不需要专人运维
    60

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云正式发布 Agentic 代码安全：AI驱动的双Agent协同引擎