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

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

2024-08-15 1043
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这篇文章讨论了在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
10660 46
使用小技巧实现el-table组件的合并行功能，ElementUI和ElementPlus都适用
TE-茶叶蛋
|
移动开发 JavaScript HTML5
el-input限制输入整数等分析
本文介绍了在Vue中限制el-input只能输入整数的几种方式，包括设置type为number，使用inputmode属性，自定义指令，计算属性，使用onafterpaste和onkeyup事件以及使用el-input-number的precision属性。每种方式都有其优缺点，可以根据实际需求选择合适的方式。比较建议用自定义指令的方式来实现。
TE-茶叶蛋
3606 0
el-input限制输入整数等分析
码喽的自我修养
|
JavaScript
elementUI/Plus 输入框按回车刷新页面分析与解决
elementUI/Plus 输入框按回车刷新页面分析与解决
码喽的自我修养
3452 1
elementUI/Plus 输入框按回车刷新页面分析与解决
全栈弄潮儿
|
UED
【Vue2从入门到精通】一分钟让你学会vue2搜索关键词高亮
本文主要介绍了vue2实现搜索关键词高亮的方法，有需要的朋友可以借鉴参考，祝大家多多进步，早日升职加薪。
全栈弄潮儿
684 0
【Vue2从入门到精通】一分钟让你学会vue2搜索关键词高亮
Li370234940
|
JavaScript 前端开发 索引
JS 删除数组元素（ 5种方法 ）
JS 删除数组元素（ 5种方法 ）
Li370234940
1426 1
fruge365
【UI】 elementui input输入框自动获取失去焦点
【UI】 elementui input输入框自动获取失去焦点
fruge365
976 1
她说她一如既往的爱我
el-upload中的before-upload不生效
el-upload中的before-upload不生效
她说她一如既往的爱我
1323 3
热爱技术的小郑
|
JavaScript
成功解决：el-dialog弹出窗口、数据第一次没有加载、第二次打开才能加载数据。（每次页面刷新后、第一次打开dialog窗口、图片数不加载）
这篇文章分享了解决Vue中`el-dialog`弹出窗口在第一次打开时数据未加载问题的技巧，通过改变组件的`key`属性来强制Vue重新渲染DOM，从而确保数据正确加载。
热爱技术的小郑
4002 0
成功解决：el-dialog弹出窗口、数据第一次没有加载、第二次打开才能加载数据。（每次页面刷新后、第一次打开dialog窗口、图片数不加载）
G佳伟
|
JavaScript 网络架构
vue 使用 this.$router.push 传参数，接参数的 query或params 两种方法示例
vue 使用 this.$router.push 传参数，接参数的 query或params 两种方法示例
G佳伟
3220 4
朝阳39
|
存储
el-tree 动态指定默认选中节点
el-tree 动态指定默认选中节点
朝阳39
1440 6

热门文章

最新文章

  • 1
    程序员必知：UCF约束介绍
  • 2
    快速体验 5 个 Serverless 经典场景
  • 3
    如何降低90%Java垃圾回收时间？以阿里HBase的GC优化实践为例
  • 4
    将各大网盘挂载本地使用！爽！
  • 5
    利用AI进行代码审查：提升软件质量的新策略
  • 6
    记一次用WPScan辅助渗透WordPress站点
  • 7
    Kubernetes - 4.2 Workload - ReplicationController
  • 8
    [20160323]关于FULL_HASH_VALUE2.txt
  • 9
    gqlplus的简单使用
  • 10
    立足未稳，不轻易出兵
  • 1
    我在 AIP 智能体平台踩过的坑，都在这篇企业 AI 落地经验里了
    52
  • 2
    阿里云 Hermes Agent / OpenClaw（Clawdbot）部署教程+WhatsApp快速接入指南
    38
  • 3
    阿里云 Hermes Agent / OpenClaw（Clawdbot/Moltbot）汉化版零门槛部署指南
    35
  • 4
    [012][缓存模块]基于 Spring Cache 的缓存操作模版，支持Caffeine缓存, Redis缓存及两级缓存
    37
  • 5
    【第5天】每天一个MySQL知识点，百日打怪升级
    38
  • 6
    [011][数据模块]基于雪花算法的 Hibernate 分布式主键生成器设计与实现
    33
  • 7
    [010][数据模块]多数据源管理器在 Hibernate 多租户中的应用
    35
  • 8
    [009][租户模块]基于 Hibernate 的多租户连接提供者设计实战
    31
  • 9
    [008][租户模块]基于Caffeine的租户隔离与两级缓存实践
    31
  • 10
    [007][租户模块]基于 TransmittableThreadLocal 与 TaskDecorator 的租户上下文传递设计
    23

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    [网络安全] Dirsearch 工具的安装、使用详细教程