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

在Vue 3中,el-select循环el-option的常见踩坑点,value值绑定对象类型?选中效果不准确?

在Vue 3中,el-select 组件是来自 Element Plus UI 库的一部分。
如果你想要设置默认选中的选项,你可以使用 v-model 来绑定选中的值。如果你想要在某个时刻让某个选项显示为已选中,可以设置对应的值到 v-model 绑定的数据。

<template><el-select v-model="selectedValue" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</template><script>
import { ref } from 'vue';
export default {setup() {const selectedValue = ref(''); // 绑定的选中值const options = ref([ // 下拉选项数据{ label: '选项1', value: 'option1' },{ label: '选项2', value: 'option2' },{ label: '选项3', value: 'option3' }]);// 默认选中第一个选项selectedValue.value = options.value[0].value;}
};
</script>

实际开发场景使用中,有时候循环的options数据结构比较复杂 嵌套层次也比较多时 ,
如果不注意value的值绑定的是个对象类型,会发现每个选项都是选中效果,这显然是不对的

当el-option的value值是对象类型时,你需要确保v-model绑定的值也是相同类型的对象,并且它们可以通过引用或者深度比较(例如,通过比较对象的属性和值)来匹配。在Vue中,对于对象类型的比较,Vue会使用===操作符,这意味着两个对象必须是同一个引用才会被认为是相等的。

如果你的v-model绑定的值是一个对象,并且你想要在el-option列表中选择一个与这个对象相匹配的选项,你需要确保列表中的每el-option的value都是对应对象的引用,或者你可以提供一个方法来比较两个对象是否相等(这通常更复杂且不推荐)。

不过,更常见的做法是使用对象的某个唯一属性(如ID)作为el-option的value,而不是整个对象
这样,v-model绑定的值就会是这个唯一属性,而不是整个对象。这样做更简单,也更符合Vue的响应式系统。
下面是一个使用对象的ID作为value的例子:
使用 :value=“item.value.id” 而不是:value=“item.value”

 const options = ref([ // 下拉选项数据,每个选项有一个唯一的id和一个label{label: '选项1' ,value:{id:1}},{ label: '选项2' ,value:{id:2}},{ label: '选项3' ,value:{id:3}},]);<el-select v-model="selectedId" placeholder="请选择"><el-optionv-for="item in options":key="item.id":label="item.label":value="item.value.id"></el-option></el-select>

当你value的值绑定的是个对象类型,发现每个选项都是选中效果
同时F12 时,你发现每个el-option都有aria-selected=“true”,这可能是由于value和v-model值得类型不一致且不等,此处再次建议 value的值近量不要绑定一个对象类型的值,

aria-selected=“true” 是一个ARIA (Accessible Rich Internet Applications) 属性,它用于表示当前选中的选项。并且该选项会添加类名‘selected’>

在ElementPlus或其他类似的UI库中,每个el-option标签上不应该在初始状态下都拥有aria-selected="true"属性,因为这意味着每个选项都被认为是选中状态,这显然是不正确的。一个下拉列表或选择器el-select中应该只有一个选项被选中,并且只有这个选项应该拥有aria-selected="true"属性。

如果以上都没问题再查看其他原因 如下:
1.Bug或错误实现:可能是Element Plus库的一个bug,或者是你使用的某个版本中的错误实现。你可以尝试更新到最新版本,或者查看Element Plus的issue追踪器,看看是否有人报告了类似的问题。

2.自定义代码或样式:可能你的代码或样式中不小心给每个都添加了aria-selected=“true”。检查你的模板、计算属性、方法或全局样式,确保没有错误地设置这个属性。

3.第三方插件或扩展:如果你使用了某些浏览器插件或开发者工具扩展,它们可能会干扰DOM并错误地添加属性。尝试在无痕模式或禁用插件的情况下查看页面,看看问题是否仍然存在。

相关文章:

在Vue 3中,el-select循环el-option的常见踩坑点,value值绑定对象类型?选中效果不准确?

在Vue 3中&#xff0c;el-select 组件是来自 Element Plus UI 库的一部分。 如果你想要设置默认选中的选项&#xff0c;你可以使用 v-model 来绑定选中的值。如果你想要在某个时刻让某个选项显示为已选中&#xff0c;可以设置对应的值到 v-model 绑定的数据。 <template>…...

Qt实现单例模式:Q_GLOBAL_STATIC和Q_GLOBAL_STATIC_WITH_ARGS

目录 1.引言 2.了解Q_GLOBAL_STATIC 3.了解Q_GLOBAL_STATIC_WITH_ARGS 4.实现原理 4.1.对象的创建 4.2.QGlobalStatic 4.3.宏定义实现 4.4.注意事项 5.总结 1.引言 设计模式之单例模式-CSDN博客 所谓的全局静态对象&#xff0c;大多是在单例类中所见&#xff0c;在之前…...

通过nginx转发后应用偶发502bad gateway

序言 学习了一些东西&#xff0c;如何才是真正自己能用的呢&#xff1f;好像就是看自己的潜意识的反应&#xff0c;例如解决了一个问题&#xff0c;那么下次再碰到类似的问题&#xff0c;能直接下意识的去找到对应的信息&#xff0c;从而解决&#xff0c;而不是和第一次碰到一样…...

linux中如何进行yum源的挂载

linux中如何进行yum源的挂载 ​ 1.首先创建目录[rootserver /]# mkdir /rhel92.使用mount命令进行、dev/cdrom/的镜像文件进行挂载[rootserver /]# mount /dev/cdrom /rhel9/ ​ 注意&#xff1a;此时设立的是临时命令。重启后则失效&#xff0c;若想在下次开启后仍然挂载&a…...

ffmpeg的部署踩坑及简单使用方式

ffmpeg的使用方式有以下几种: 使用原生安装包 直接在ffmpeg官网上下载安装该软件,加入到环境变量中就可以使用了 优点:简单,灵活,代码中也不用添加其他第三方的包 缺点:需要手动安装ffmpeg,这点比较麻烦 部署-windows 在windows环境下,有时就算加入到了环境变量,…...

misc刷题记录2[陇剑杯 2021]

[陇剑杯 2021]webshell (1)单位网站被黑客挂马&#xff0c;请您从流量中分析出webshell&#xff0c;进行回答&#xff1a; 黑客登录系统使用的密码是_____________。得到的flag请使用NSSCTF{}格式提交。 这里我的思路是&#xff0c;既然要选择的时间段是黑客登录网站以后&…...

AI发展面临的问题? —— AI对创造的重新定义

一、AI的问题描述 AI与数据安全问题&#xff1a;随着AI技术的发展和应用&#xff0c;数据安全问题日益突出。AI模型训练依赖于大量数据&#xff0c;而这些数据中可能包含个人隐私、商业秘密等敏感信息。如果数据在采集、存储、使用过程中处理不当&#xff0c;可能导致数据泄露或…...

k8s学习--OpenKruise详细解释以及原地升级及全链路灰度发布方案

文章目录 OpenKruise简介OpenKruise来源OpenKruise是什么&#xff1f;核心组件有什么&#xff1f;有什么特性和优势&#xff1f;适用于什么场景&#xff1f; 什么是OpenKruise的原地升级原地升级的关键特性使用原地升级的组件原地升级的工作原理 应用环境一、OpenKruise部署1.安…...

上海亚商投顾:沪指缩量调整 PCB概念股持续爆发

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 大小指数昨日走势分化&#xff0c;沪指全天震荡调整&#xff0c;创业板指午后涨超1%。消费电子板块全天强势&a…...

QT属性系统,简单属性功能快速实现 QT属性的简单理解 属性学习如此简单 一文就能读懂QT属性 QT属性最简单的学习

4.4 属性系统 Qt 元对象系统最主要的功能是实现信号和槽机制&#xff0c;当然也有其他功能&#xff0c;就是支持属性系统。有些高级语言通过编译器的 __property 或者 [property] 等关键字实现属性系统&#xff0c;用于提供对成员变量的访问权限&#xff0c;Qt 则通过自己的元对…...

【IEEE出版丨EI检索】2024新型电力系统与电力电子国际会议(NPSPE 2024)

2024新型电力系统与电力电子国际会议&#xff08;NPSPE 2024&#xff09;将于8月16日至18日在中国大连举行&#xff0c;本届大会致力于为相关领域的专家和学者提供一个探讨行业热点问题&#xff0c;促进科技进步&#xff0c;增加科研合作的平台。本届大会涵盖新型电力系统和电力…...

【Netty】nio阻塞非阻塞Selector

阻塞VS非阻塞 阻塞 阻塞模式下&#xff0c;相关方法都会导致线程暂停。 ServerSocketChannel.accept() 会在没有建立连接的时候让线程暂停 SocketChannel.read()会在没有数据的时候让线程暂停。 阻塞的表现就是线程暂停了&#xff0c;暂停期间不会占用CPU&#xff0c;但线程…...

ES 操作

1、删除索引的所有记录 curl -X POST "localhost:9200/<index-name>/_delete_by_query" -H Content-Type: application/json -d {"query": {"match_all": {}} }POST /content_erp_nlp_help/_delete_by_query { "query": { &quo…...

uniapp如何实现跳转

在 UniApp 中&#xff0c;页面跳转主要可以通过两种方式实现&#xff1a;使用 <navigator> 组件和调用 UniApp 提供的导航 API。以下是这两种方式的详细说明&#xff1a; 1. 使用 <navigator> 组件 <navigator> 组件允许你在页面上创建一个可点击的元素&am…...

Stable-Diffusion-WebUI 常用提示词插件

SixGod提示词插件 SixGod提示词插件可以帮助用户快速生成逼真、有创意的图像。其中包含&#xff0c;清空正向提示词”和“清空负向提示词、提示词起手式包含人物、服饰、人物发型等各个维度的提示词、一键清除正面提示词与负面提示词、随机灵感关键词、提示词分类组合随机、动…...

单片机 PWM输入捕获【学习记录】

前言 学习是永无止境的&#xff0c;就算之前学过的东西再次学习一遍也能狗学习到很多东西&#xff0c;输入捕获很早之前就用过了&#xff0c;但是仅仅是照搬例程没有去进行理解。温故而知新&#xff01; 定时器 定时器简介 定时器的分类 高级定时器 通用定时器 基本定时器…...

3.1、前端异步编程(超详细手写实现Promise;实现all、race、allSettled、any;async/await的使用)

前端异步编程规范 Promise介绍手写Promise&#xff08;resolve&#xff0c;reject&#xff09;手写Promise&#xff08;then&#xff09;Promise相关 API实现allraceallSettledany async/await和Promise的关系async/await的使用 Promise介绍 Promise是一个类&#xff0c;可以翻…...

3.1. 马氏链-马氏链的定义和示例

马氏链的定义和示例 马氏链的定义和示例1. 马氏链的定义2. 马氏链的示例2.1. 随机游走2.2. 分支过程2.3. Ehrenfest chain2.4. 遗传模型2.5. M/G/1 队列 马氏链的定义和示例 1. 马氏链的定义 对于可数状态空间的马氏链, 马氏性指的是给定当前状态, 其他过去的状态与未来的预测…...

红利之外的A股底仓选择:A50

内容提要 华泰证券指出&#xff0c;当前指数层面下行风险不大&#xff0c;市场再入震荡期下&#xff0c;可关注三条配置线索&#xff1a;1&#xff09;A50为代表的产业巨头&#xff1b;2&#xff09;以家电/食饮/物流/出版为代表的稳健消费龙头&#xff0c;3&#xff09;消费电…...

wondershaper 一款限制 linux 服务器网卡级别的带宽工具

文章目录 一、关于wondershaper二、文档链接三、源码下载四、限流测试五、常见报错1. /usr/local/sbin/wondershaper: line 145: tc: command not found2. Failed to download metadata for repo ‘appstream‘: Cannot prepare internal mirrorlist: No URLs.. 一、关于wonder…...

独孤思维:盲目进群,根本赚不到钱

01 我看有些伙伴&#xff0c;对标同行找写作素材和灵感的时候。 喜欢把对标文章发给ai提炼总结。 这个方法好是好&#xff0c;但是&#xff0c;有一个问题。 即&#xff0c;无法感受全文的细节。 更无法感受作者的情感和温度。 就好像电影《记忆大师》一样。 我提取了记…...

针对indexedDB的简易封装

连接数据库 我们首先创建一个DBManager类&#xff0c;通过这个类new出来的对象管理一个数据库 具体关于indexedDB的相关内容可以看我的这篇博客 indexedDB class DBManager{}我们首先需要打开数据库&#xff0c;打开数据库需要数据库名和该数据库的版本 constructor(dbName,…...

网络编程--网络理论基础(二)

这里写目录标题 网络通信流程mac地址、ip地址arp协议交换机路由器简介子网划分网关 路由总结 为什么ip相同的主机在与同一个互联网服务通信时不冲突公网ip对于同一个路由器下的不同设备&#xff0c;虽然ip不冲突&#xff0c;但是因为都是由路由器的公网ip转发通信&#xff0c;接…...

Python MongoDB 基本操作

本文内容主要为使用Python 对Mongodb数据库的一些基本操作整理。 目录 安装类库 操作实例 引用类库 连接服务器 连接数据库 添加文档 添加单条 批量添加 查询文档 查询所有文档 查询部分文档 使用id查询 统计查询 排序 分页查询 更新文档 update_one方法 upd…...

Node.js 入门:

Node.js 是一个开源、跨平台的 JavaScript 运行时环境&#xff0c;它允许开发者在浏览器之外编写命令行工具和服务器端脚本。以下是一些关于 Node.js 的基础教程&#xff1a; 1. **Node.js 入门**&#xff1a; - 了解 Node.js 的基本概念&#xff0c;包括它是一个基于 Chro…...

java8 List的Stream流操作 (实用篇 三)

目录 java8 List的Stream流操作 (实用篇 三) 初始数据 1、Stream过滤&#xff1a; 过滤-常用方法 1.1 筛选单元素--年龄等于18 1.2 筛选单元素--年龄大于18 1.3 筛选范围--年龄大于18 and 年龄小于40 1.4 多条件筛选--年龄大于18 or 年龄小于40 and sex男 1.5 多条件筛…...

机器学习python实践——数据“相关性“的一些补充性个人思考

在上一篇“数据白化”的文章中&#xff0c;说到了数据“相关性”的概念&#xff0c;但是在统计学中&#xff0c;不仅存在“相关性”还存在“独立性”等等&#xff0c;所以&#xff0c;本文主要对数据“相关性”进行一些补充。当然&#xff0c;如果这篇文章还能入得了各位“看官…...

MySQL——触发器(trigger)基本结构

1、修改分隔符符号 delimiter $$ $$可以修改 2、创建触发器函数名称 create trigger 函数名 3、什么样在操作触发&#xff0c;操作哪个表 after &#xff1a;……之后触发 before &#xff1a;……之后触发 insert &#xff1a;……之后触发 update &#xff1a;……之后触…...

数字孪生定义及应用介绍

数字孪生定义及应用介绍 1 数字孪生&#xff08;Digital Twin, DT&#xff09;概述1.1 定义1.2 功能1.3 使用场景1.4 数字孪生三步走1.4.1 数字模型1.4.2 数字影子1.4.3 数字孪生 数字孪生地球平台Earth-2 参考 1 数字孪生&#xff08;Digital Twin, DT&#xff09;概述 数字孪…...

数据赋能(122)——体系:数据清洗——技术方法、主要工具

技术方法 数据清洗标准模型是将数据输入到数据清洗处理器&#xff0c;通过一系列步骤“清理”数据&#xff0c;然后以期望的格式输出清理过的数据。数据清洗从数据的准确性、完整性、一致性、惟一性、适时性、有效性几个方面来处理数据的丢失值、越界值、不一致代码、重复数据…...

网站设计模板/兰州seo公司

有什么用&#xff1f; 2017年初&#xff0c;整个全景相机产业经历了一轮小爆发。除了像Insta 360、德图等几家创业公司外&#xff0c;小米、努比亚等几家传统手机厂商在2017年4月份也相继发布了自己的消费级全景相机&#xff0c;紧接着&#xff0c;Facebook、Google互联网巨头…...

做网站找个人还是找公司好/合肥品牌seo

原文链接&#xff1a;http://blog.csdn.net/fengbingchun/article/details/47378515 Eigen是可以用来进行线性代数、矩阵、向量操作等运算的C库&#xff0c;它里面包含了很多算法。它的License是MPL2。它支持多平台。 Eigen采用源码的方式提供给用户使用&#xff0c;在使用时只…...

外贸电子商务网站建设/推广是什么意思

1.与或有事项相关的“可能”是指&#xff08;&#xff09;。 A.发生的可能性大于95&#xff05;但小于100&#xff05; B.发生的可能性大于30&#xff05;但小于或等于50&#xff05; C.发生的可能性大于50&#xff05;但小于或等于95&#xff05; D.发生的可能性大于5&#x…...

wordpress中的类/seo教程自学入门教材

上一节配置了Simple check&#xff0c;现在来通过Simple check 用ICMP ping来监控充节点运行情况。Zabbix使用fping处理ICMP ping的请求&#xff0c;需要安装fping程序&#xff0c;安装完毕之后需要在zabinx_server.conf中的参数FpingLocation配置fping安装的路径。由于fping默…...

怎么给网站添加站点统计/b站推出的短视频app哪个好

113. 路径总和II 链接&#xff1a;https://leetcode-cn.com/problems/path-sum-ii/ 题目描述见链接内容。 解法1&#xff1a;广度优先搜索 在广度优先搜索时&#xff0c;重新构造了一个queue&#xff0c;原本的queue只用来存放未遍历的节点&#xff0c;现在queue的成员是一个…...

python下载安装教程/seo网络推广招聘

1.模块化&#xff0c;组件化&#xff0c;插件化 链接: 什么是模块化&#xff0c;组件化&#xff0c; 插件化&#xff1f; 2.iOS组件化思路 链接: iOS组件化思路&#xff0d;大神博客研读和思考 链接: iOS应用架构谈 组件化方案...