当前位置: 首页 > news >正文

ElSelect 组件的 onChange 和 onInput 事件的区别

偶然遇到一个问题,在 ElSelect 组件中设置 filterable 属性后,监测不到复制粘贴的内容,也就意味着不能调用接口,下拉框内容为空。

简要代码如下:

<ElSelectstyle="width: 256px"multiplev-model={siteIdList}clearablefilterableremoteremoteMethod={getSiteList}placeholder="请输入门店名称">{siteList.value.map((item) => (<ElOption label={item.siteName} value={item.siteId} />))}
</ElSelect>

对此进行分析。

1. 直观区别

在 ElSelect 组件中,onInput 和 onChange 都是用于监听用户选择内容的事件,区别在于:

1、onInput 事件

触发时机:onInput 事件在用户每次选择新选项时都会立即触发,即每当输入值发生变化(无论是添加or移除),都会触发这个事件。

适用场景:通常用于实时响应用户输入,如动态更新页面数据、过滤、自动填充等。其触发频率较高,更适合于即时性要求较高的场景。

2、onChange 事件

触发时机:onChange 事件仅在用户选择内容发生最终变化并确认时触发。例如,在用户点击选项列表中的某一项完成选择后,onChange 才会触发。重复选择同一个选项不会触发 onChange。

适用场景:更适合在选择操作完成后再进行的逻辑处理,例如提交表单、更新数据等。因为它只在确认选择后触发,频率较低,适合用于非即时响应的场景。

2. 事件挂载

在 ElSelect 组件中,onInput 和 onChange 事件的挂载有明显的不同,这关系到它们在 Vue 中的实现和具体作用。

1、onInput 事件

挂载位置:onInput 事件实际上是与 v-model 绑定的默认事件。在 Vue 中,v-model 会自动绑定组件的 input 事件来更新数据,因此当 ElSelect 的选择值发生变化时,它会触发 onInput 事件,将新值传递给 v-model 绑定的数据。这点需要额外注意📢下!

🌰:

<el-select v-model="selectedValue" @input="handleInput"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/>
</el-select>

当 selectedValue 更新时,@input 会自动触发,实时同步数据。

2、onChange 事件

挂载位置:onChange 是 ElSelect 自带的事件监听器,与 v-model 没有直接关系。它可以单独挂载在组件实例上,用于检测最终选择的变化。这点需要额外注意📢下!

🌰:

<el-select v-model="selectedValue" @change="handleChange"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/>
</el-select>

当用户的选择发生最终变化后,@change 会触发 handleChange 方法,而不会在每次切换选项时触发。

总结

3. 解决方法

针对上述分析,可以在 ElSelect 组件上使用 onInput 事件,监听内容的改变。

<ElSelectref={storeRef}style="width: 256px"filterableremoteremoteMethod={getSiteList}onInput={(e) => { handleInput(e?.data || ''); }}multipleclearablev-model={siteIdList}placeholder="请输入门店名称">{siteList.value?.map((item) => (<ElOption label={item.siteName} value={item.siteId} />))}
</ElSelect>

然后在 handleInput 事件上调用 storeRef 的 remoteMethod 事件进一步处理,由此成功解决。

const handleInput = debounce((query, type) => {storeRef.value.remoteMethod(query);
}, 300);

相关文章:

ElSelect 组件的 onChange 和 onInput 事件的区别

偶然遇到一个问题&#xff0c;在 ElSelect 组件中设置 filterable 属性后&#xff0c;监测不到复制粘贴的内容&#xff0c;也就意味着不能调用接口&#xff0c;下拉框内容为空。 简要代码如下&#xff1a; <ElSelectstyle"width: 256px"multiplev-model{siteIdL…...

加密与数据提取:保护隐私的新途径

加密与数据提取&#xff1a;保护隐私的新途径 在数字化时代&#xff0c;数据已成为驱动社会进步和经济发展的关键要素。然而&#xff0c;随着数据量的爆炸性增长&#xff0c;个人隐私保护成为了一个亟待解决的问题。如何在利用数据价值的同时&#xff0c;确保个人隐私不被侵犯…...

博客摘录「 宋宝华:Linux文件读写(BIO)波澜壮阔的一生」2024年11月1日

同时内核会给第2页标识一个PageReadahead标记&#xff0c;意思就是如果app接着读第2页&#xff0c;就可以预判app在做顺序读&#xff0c;这样我们在app读第2页的时候&#xff0c;内核可以进一步异步预读。 每个bio对应的硬盘里面一块连续的位置&#xff0c;每一块硬盘里面连续…...

使用华为云数字人可以做什么

在数字化和智能化快速发展的今天&#xff0c;企业面临着如何提升客户体验、优化运营效率的挑战。华为云数字人作为一种创新的智能交互解决方案&#xff0c;为企业提供了全新的可能性&#xff0c;助力企业在各个领域实现智能化升级。 提升客户服务体验 华为云数字人能够模拟真…...

leetcode刷题记录——(十六)349. 两个数组的交集

&#xff08;一&#xff09;问题描述 . - 力扣&#xff08;LeetCode&#xff09;. - 备战技术面试&#xff1f;力扣提供海量技术面试资源&#xff0c;帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/intersection-of-two-arrays/ …...

vue3实现规则编辑器

组件用于创建和编辑复杂的条件规则&#xff0c;支持添加、删除条件和子条件&#xff0c;以及选择不同的条件类型。 可实现json数据和页面显示的转换。 代码实现 &#xff1a; index.vue: <template><div class"allany-container"><div class"co…...

【快速上手】pyspark 集群环境下的搭建(Standalone模式)

目录 前言 &#xff1a; 一、spark运行的五种模式 二、 安装步骤 安装前准备 1.第一步&#xff1a;安装python 2.第二步&#xff1a;在bigdata01上安装spark 3.第三步&#xff1a;同步bigdata01中的spark到bigdata02和03上 三、集群启动/关闭 四、打开监控界面验证 前…...

中文NLP地址要素解析【阿里云:天池比赛】

比赛地址&#xff1a;中文NLP地址要素解析 https://tianchi.aliyun.com/notebook/467867?spma2c22.12281976.0.0.654b265fTnW3lu长期赛&#xff1a; 分数:87.7271 排名&#xff1a;长期赛:56&#xff08;本次&#xff09;/6990&#xff08;团体或个人&#xff09;方案&#xf…...

使用AddressSanitizer内存检测

修改cmakelist.txt&#xff0c;在project(xxxx)后面追加&#xff1a; option(MEM_CHECK "memory check with AddressSanitizer" OFF) if(MEM_CHECK)set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} -fsanitizeaddress")set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS…...

11月1日星期五今日早报简报微语报早读

11月1日星期五&#xff0c;农历十月初一&#xff0c;早报#微语早读。 1、六大行今日起实施存量房贷利率新机制。 2、谷歌被俄罗斯罚款35位数&#xff0c;罚款远超全球GDP。 3、山西吕梁&#xff1a;女性35岁前登记结婚&#xff0c;给予1500元奖励。 4、我国人均每日上网时间…...

实用篇:Postman历史版本下载

postman历史版本下载步骤 1.官方历史版本发布信息 2.点进去1中的链接,往下滑动;选择你想要的版本 例如下载v11.18版本 3.根据操作系统选择 mac:mac系统postman下载 window:window系统postman下载 4.在old version里找到对应版本下载即可 先点击download 再点击free downlo…...

微服务实战系列之玩转Docker(十七)

导览 前言Q&#xff1a;如何实现etcd数据的可视化管理一、创建etcd集群1. 节点定义2. 集群成员2.1 docker ps2.2 docker exec2.3 etcdctl member list 二、发布数据1. 添加数据2. 数据共享 三、可视化管理1. ETCD Keeper入门1.1 简介1.2 安装1.2.1 定义compose.yml1.2.2 启动ke…...

操作系统-实验报告单(1)

目录 1 实验目标 2 实验工具 3 实验内容、实验步骤及实验结果 一、安装虚拟机及Ubuntu 5、*存在虚拟机不能安装的问题 二、Ubuntu基本操作 1、桌面操作 2、终端命令行操作 三、在Ubuntu下运行C程序 3、*Ubuntu中编写一个Hello.c的主要程序 4 实验总结 实 验 报 告…...

rom定制系列------小米8青春版定制安卓14批量线刷固件 原生系统

&#x1f49d;&#x1f49d;&#x1f49d;小米8青春版。机型代码platina。官方最终版为 12.5.1安卓10的版本。客户需要安卓14的固件以便使用他们的软件。根据测试&#xff0c;原生pixeExpe固件适配兼容性较好。为方便客户批量进行刷写。修改固件为可fast批量刷写。整合底层分区…...

CATIA许可证常见问题解答

在使用CATIA软件的过程中&#xff0c;许可证问题常常是用户关心的焦点。为了帮助大家更好地理解和解决这些问题&#xff0c;我们整理了一份CATIA许可证常见问题解答&#xff0c;希望能为您提供便捷的参考。 问题一&#xff1a;如何激活CATIA许可证&#xff1f; 解答&#xff1a…...

PySpark Standalone 集群部署教程

目录 1. 环境准备 1.1 配置免密登录 2. 下载并配置Spark 3. 配置Spark集群 3.1 配置spark-env.sh 3.2 配置spark-defaults.conf 3.3 设置Master和Worker节点 3.4 设配置log4j.properties 3.5 同步到所有Worker节点 4. 启动Spark Standalone集群 4.1 启动Master节点 …...

【源码+文档】基于SpringBoot+Vue旅游网站系统【提供源码+答辩PPT+参考文档+项目部署】

作者简介&#xff1a;✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容&#xff1a;&#x1f31f;Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…...

9.排队模型-M/M/1

1.排队模型 在Excel中建立排队模型可以帮助分析系统中的客户流动和服务效率。以下是如何构建简单排队模型的步骤&#xff1a; 1.确定模型参数 到达率&#xff08;λ&#xff09;&#xff1a;客户到达系统的平均速率&#xff08;例如每小时到达的客户数&#xff09;。服务率&…...

【GO学习笔记 go基础】编译器下载安装+Go设置代理加速+项目调试+基础语法+go.mod项目配置+接口(interface)

编译器下载&安装 下载并安装go1.23.2.windows-amd64.msi默认安装再C:\Program Files\Go\ PS C:\Users\kingchuxing\Documents> go version go version go1.23.2 windows/amd64Go设置GOPROXY国内加速 windows // 启用 Go Modules 功能 PS C:\Users\kingchuxing…...

从0开始学习shell脚本

了解Shell和Shell脚本 Shell&#xff1a;Shell是一个命令解释器&#xff0c;用来执行用户输入的命令。常用的Shell包括Bash、Zsh、Ksh等。Linux默认的Shell通常是Bash。 Shell脚本&#xff1a;Shell脚本是由一系列命令组成的文件&#xff0c;脚本可以运行一连串命令&#xff…...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

《Docker》架构

文章目录 架构模式单机架构应用数据分离架构应用服务器集群架构读写分离/主从分离架构冷热分离架构垂直分库架构微服务架构容器编排架构什么是容器&#xff0c;docker&#xff0c;镜像&#xff0c;k8s 架构模式 单机架构 单机架构其实就是应用服务器和单机服务器都部署在同一…...