el-input中change事件造成的坑

el-input中change事件造成的坑

  • 一、change事件定义
  • 二、如果仅回车时候触发

一、change事件定义

仅在输入框失去焦点或用户按下回车时触发

在这里插入图片描述

二、如果仅回车时候触发

<el-input
  v-model.trim="questionInput"
  placeholder="请输入你的问题,按回车发送"
  prefix-icon="el-icon-search"
  class="custom-placeholder-recommend"
  @keyup.native.enter="handleRecommend('input', '', $event)"
  clearable
>
//@click.stop  或者  @click.prevent 
</el-input>


handleRecommend(type, name, event) {
  if (event) {
    event.stopPropagation(); // 阻止事件冒泡
 
    //@keydown.enter.prevent
    event.preventDefault();  // 阻止默认的换行行为
 }
},




在 Vue.js 中,@keyup.enter 和 @keyup.native.enter 是两种不同的事件监听方式,具有以下区别:

@keyup.enter:
@keyup.enter 是 Vue 的内置事件修饰符,用于监听键盘按键事件。在这种情况下,.enter 表示监听回车键(Enter 键)的按键事件。
当使用 @keyup.enter 时,Vue 将会在组件上绑定一个处理器来监听键盘按键事件,并只在按下回车键时触发对应的函数。

@keyup.native.enter:
@keyup.native.enter 是基于原生 DOM 事件的方式来监听键盘按键事件,且将聚焦在元素上的第一个子元素。
使用 @keyup.native 可以绑定到组件的根元素上,而不是组件自己处理键盘事件。这样可以确保即使 <el-input> 组件内部的某些元素也能够响应键盘事件。

添加 .native 修饰符后,在父组件中触发的键盘事件能够穿透到子组件,并且不需要在子组件中再次声明键盘事件监听器。
因此,如果您想在父组件中处理特定的键盘事件并确保该事件能够传递到子组件,可以使用 @keyup.native.enter。而 @keyup.enter 则是直接在当前组件上监听回车键事件。根据需要,选择合适的方式来监听键盘事件。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/688720.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vue-$set修改深层对象的值

背景&#xff1a; 点击编辑按钮&#xff0c;打开修改预算的抽屉&#xff0c;保存后更新此行数据的预算&#xff0c;以前是调接口刷新表格&#xff0c;这次的数据是由前端处理更新&#xff0c;由于数据层级比较深&#xff0c;使用$set来修改两层嵌套对象 使用方法&#xff1a; …

python - DataFrame查询数据操作

学习目标 掌握获取df一列或多列数据的方法 知道loc和iloc的区别以及使用方法 知道df的query函数的使用方法 知道isin函数的作用和使用方法 获取DataFrame子集的基本方法 1.1 从前从后获取多行数据 案例中用到的数据集在文章顶部 LJdata.csv 前景回顾 head() & tail(…

opencv实战小结-银行卡号识别

实战1-银行卡号识别 项目来源&#xff1a;opencv入门 项目目的&#xff1a;识别传入的银行卡照片中的卡号 难点&#xff1a;银行卡上会有一些干扰项&#xff0c;如何排除这些干扰项&#xff0c;并且打印正确的号码是一个问题 最终效果如上图 实现这样的功能需要以下几个步骤…

JDK7 JDK8 JDK9接口中的默认方法、静态方法、私有方法

JDK8开始之后接口新增的方法 JDK7以前&#xff1a;接口中只能定义抽象方法 JDK8的新特性&#xff1a;接口中可以定义有方法体的方法&#xff08;默认、静态&#xff09; JDK9的新特性&#xff1a;接口中可以定义私有方法 接口中的默认方法InterA package com.itheima.a06;p…

IO进程线程(十)进程间通信 消息队列 共享内存 信号灯集

文章目录 一、IPC(Inter-Process Communication)进程间通信相关命令 &#xff1a;&#xff08;一&#xff09;ipcs --- 查看IPC对象&#xff08;二&#xff09;获取IPC键值&#xff08;三&#xff09;删除IPC对象的命令&#xff08;四&#xff09;获取IPC键值的函数1. 函数定义…

C++基础与深度解析 | 模板 | 函数模板 | 类模板与成员函数模板 | concepts | 完美转发 | 模板的其他内容

文章目录 一、函数模板二、类模板与成员函数模板三、Concepts(C20)四、模板相关内容1.数值模板参数与模板模板参数2.别名模板与变长模板3.包展开与折叠表达式4.完美转发与lambda表达式模板5.消除歧义与变量模板 一、函数模板 在C中&#xff0c;函数模板是一种允许你编写可以处理…

在Windows上安装VMWare Pro 16.2(虚拟机)并从零安装CentOS 7.6镜像过程记录

本文详细记录了在Windows的VMWare Workstation Pro 16.2中安装CentOS 7.6 的过程,非常适合新手从零开始一步步安装。 文章目录 一、安装VMWare Workstation Pro 16.2并激活二、安装CentOS 7.62.1 下载CentOS7.6镜像文件2.2 创建新的虚拟机2.3 安装CentOS镜像一、安装VMWare Wo…

國際知名榮譽顧問加入台灣分析集團總部,全面升級量子電腦Q系統

近期,國際知名的榮譽顧問正式加入台灣分析集團總部,利用相同的量子數據規格訊息數據庫,進行全方位的系統升級。此次升級後,量子電腦Q系統的精確預測和迅速反應能力提升了3.29%。透過高級的數據處理和技術分析,社群用戶將在瞬息萬變的市場中保持領先地位。 “量子電腦Q系統”由資…

C语言字符、数组指针变量

目录 一、字符指针变量 二、数组指针变量 a.数组指针变量是什么 b.数组指针变量的书写格式 c.数组指针变量如何初始化 d.二维数组传参的本质 一、字符指针变量 在指针的类型中我们知道有一种指针类型为字符指针 char* 。 其一般使用&#xff1a; int main() {char ch w…

【MySQL数据库】my.ini文件参数中文注释

&#x1f60e; 作者介绍&#xff1a;我是程序员洲洲&#xff0c;一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主。 &#x1f913; 同时欢迎大家关注其他专栏&#xff0c;我将分享Web前后端开发、人工智能、机器学习、深…

LLM的基础模型7:Positional Encoding

大模型技术论文不断&#xff0c;每个月总会新增上千篇。本专栏精选论文重点解读&#xff0c;主题还是围绕着行业实践和工程量产。若在某个环节出现卡点&#xff0c;可以回到大模型必备腔调或者LLM背后的基础模型新阅读。而最新科技&#xff08;Mamba,xLSTM,KAN&#xff09;则提…

数据结构笔记1 绪论,线性表

学习视频&#xff1a; 第01周c--1.2基本概念和术语1_哔哩哔哩_bilibili 01《数据结构》绪论_哔哩哔哩_bilibili 数据&#xff1a; 1.数值型的数据&#xff1a;整数&#xff0c;实数 2.非数值型的数据&#xff1a;文字、图像.. 数据元素&#xff1a;&#xff08;元素&#xf…

给孩子的端午节礼物:最新初中数学思维导图大合集+衡水高考学霸笔记,可下载打印!

大家好哇&#xff01;端午节到了&#xff0c;阿星给家里有孩子的伙伴们一份礼物哦&#xff01;今天给大家带来一个超级实用的学习神器——思维导图法&#xff0c;最新版的初中数学思维导图大合集&#xff01; 这可不是我吹哦&#xff0c;连哈佛、剑桥大学都在用的高级学习方法…

JavaScript事件监听之其它事件(页面加载事件、元素滚动事件、页面尺寸事件、M端事件)

目录 1. 页面加载事件(load、DOMContentLoaded)2. 元素滚动事件(scroll)3. 页面尺寸事件3.1 resize3.2 获取元素宽高3.3 获取元素位置(offsetLeft和offsetTop、getBoundingClientRect) 4. M端事件 1. 页面加载事件(load、DOMContentLoaded) load事件&#xff1a; 使用场景: 等…

JVM 虚拟机

JVM 是 Java Virtual Machine 的简称&#xff0c;意为 Java 虚拟机&#xff0c;虚拟机是指通过软件模拟的具有完整硬件功能的、运行在一个完全隔离的环境中的完整计算机系统。 常见的虚拟机有&#xff1a;JVM、VMwave、Virtual Box等。JVM 是一台被定制过的现实当中不存在的计算…

流量录制学习

AREX Cloud | AREX (arextest.com) 流量录制学习&#xff0c;比vivo的moonbox要好用

【QT5】<总览四> QT常见绘图、图表及动画

文章目录 前言 一、QFile类读写文件 二、QPainter绘简单图形 三、QChart图表 四、QPropertyAnimation属性动画 五、Q_PROPERTY宏简介 六、自定义属性动画 前言 承接【QT5】&#xff1c;总览三&#xff1e; QT常用控件。若存在版权问题&#xff0c;请联系作者删除&#…

C语言过度C++语法补充(面向对象之前语法)

目录 1. C相较于C语言新增的语法 0. C 中的输入输出 1. 命名空间 1. 我们如何定义一个命名空间&#xff1f; 2. 如何使用一个命名空间 3. 命名空间中可以定义什么&#xff1f; 4. 在 相同或者不同 的文件中如果出现 同名的命名空间 会如何&#xff1f; 5. 总结~~撒花~~…

社区服务支持

社区服务支持 原创 小王搬运工 时序课堂 2024-06-07 19:29 四川 &#x1f31f; 邀请函 | 加入我们的时序数据挖掘社区 &#x1f680; 尊敬的数据爱好者们&#xff0c; 我们诚挚地邀请您加入我们的专业社区——时序数据挖掘社区&#xff0c;一个专注于时序数据分析、挖掘与应…

网络空间安全数学基础·同余式

6.1 剩余系&#xff08;掌握&#xff09; 6.2 同余式概念与一次同余式&#xff08;熟练&#xff09; 6.3 中国剩余定理&#xff08;熟练&#xff09; 6.1 剩余系 设m是正整数&#xff0c;模m同余的全体整数是一个模m剩余类&#xff0c;即可表示为a qmr&#xff0c; 0≤r<…