在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并错误地添加属性。尝试在无痕模式或禁用插件的情况下查看页面,看看问题是否仍然存在。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 10.0 framework层禁止扫描5g wifi功能实现

1.前言 在10.0的系统rom定制化开发中,在关于对wifi模块的开发中,由于wifi模块仅支持2.4g网络,所以需要在wifi扫描的过程中 禁止扫描5g网络,所以就需要分析扫描过程中的功能,接下来具体实现相关功能 2.framework层禁止扫描5g wifi功能实现的核心类 frameworks/opt/net/w…

TrinityCore启动报错: MySQL library version (8.0.37 id 80037) does not match

TrinityCore启动的时候报错&#xff1a; TrinityCore/src/server/database/Database/DatabaseWorkerPool.cpp:73 in DatabaseWorkerPool FATAL ERROR: Used MySQL library version (8.0.37 id 80037) does not match the version id used to compile TrinityCore (id 80036). S…

农产品商城系统农资电商商城系统java项目jsp web项目

农产品商城系统农资电商商城系统java项目jsp web项目 会员用户可以实现&#xff1a;注册登录、商品信息浏览、加入购物车、加入收藏、下单支付、查看公告、查看以及留言、个人信息管理 后台管理的实现&#xff1a;类别管理模块、商品管理模块、会员管理模块、订单管理、退货管…

你项目用到了 Dubbo,讲讲为什么要用以及怎么使用的?

引言&#xff1a;在现代分布式系统中&#xff0c;服务化架构已成为构建高性能、可扩展和可靠系统的关键。 Dubbo 作为一种优秀的服务化框架&#xff0c;提供了丰富的特性和灵活的配置选项&#xff0c;使得它在业界得到了广泛的应用和认可。本文将探讨为什么选择 Dubbo 以及如何…

JavaEE大作业之班级通讯录系统(前端HTML+后端JavaEE实现)PS:也可选网络留言板、图书借阅系统、寝室管理系统

背景&#xff1a; 题目要求&#xff1a; 题目一&#xff1a;班级通讯录【我们选这个】 实现一个B/S结构的电子通讯录&#xff0c;其中的每条记录至少包含学号、姓名、性别、班级、手机号、QQ号、微信号&#xff0c;需要实现如下功能&#xff1a; &#xff08;1&#xff09;…

linux的一些知识点分享-------关于操作维护的一些知识点

Apache服务器的监听端口,默认为() Apache服务器的监听端口&#xff0c;默认为80。 vsftpd中,可以不需提供账号密码就能进行访问的用户是( ) 在vsftpd&#xff08;Very Secure FTP Daemon&#xff09;中&#xff0c;可以不需要提供账号密码就能进行访问的用户通常是匿名用户。…

Objective-C基础语言开发来袭,你准备好了吗?

文/ZaiZai 前言 今天小白电脑技术的公众号迎来了一位Objective-C语言开发大神——ZaiZai。接下来有想要学习写插件&#xff08;iOS/macOS/iPadOS/tvOS&#xff09;的小伙伴可以关注微信公众号&#xff0c;教程将持续更新。 ZaiZai个人介绍……呃……他不让放。 Objective-C…

flutter升级textField WhitelistingTextInputFormatter

将WhitelistingTextInputFormatter(RegExp("[0-9]"))升级FilteringTextInputFormatter.allow(RegExp("[0-9]")), 一下为新方法 1.只允许输入数 TextField(inputFormatters: [FilteringTextInputFormatter.allow(RegExp("[0-9.]")),],),2.only …

AI早班车6.13

全球AI新闻速递 1.Yandex 开源模型训练工具“YaFSDP”&#xff0c;提升 GPU 利用率。 2.全天候激光智能除草机器人落地&#xff0c;环境零污染。 3.苹果2024开发者大会-Siri 更智能。 4.CampusAI筹集1000万美元种子资金&#xff0c;创建虚拟校园用于学习AI技能。 5.OpenAI&…

C语言详解(预编译)

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;&#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;&#x1f4a5;所属专栏&#xff1a;C语言 &#x1f680;本系列文章为个人学习…

深度学习每周学习总结N1(one-hot 编码案例)

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 数据链接 提取码&#xff1a;c949 –来自百度网盘超级会员V5的分享 目录 总结&#xff1a;1. 中文文本One-Hot编码示例代码解析 2.直接使…

js实现实现九宫格乱序抽奖

我们以前写的九宫格抽奖&#xff0c;都是顺时针按照顺序进行旋转抽奖&#xff0c;今天给大家分享一下乱序&#xff0c;就是不按照一定顺序的。 用户的具体步骤&#xff1a;用户点击开始抽奖时&#xff0c;奖项开始随机闪&#xff0c;闪到一定次数后停止并且进行抽奖成功提示&a…

什么是DMZ?路由器上如何使用DMZ?

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 DMZ 📒🚀 DMZ的应用场景💡 路由器设置DMZ🎈 注意事项 🎈⚓️ 相关链接 ⚓️📖 介绍 📖 在网络管理中,DMZ(Demilitarized Zone,隔离区)是一个特殊的网络区域,常用于将公共访问和内部网络隔离开来。DMZ功能允许…

vue面试题汇总之响应式理解

进行代理(解决第一步读写数据调用函数) vue2使用Object.defineProperty进行数据代理(getter和setter),vue3使用Proxy进行数据代理 Proxy的性能会比Object.defineProperty好很多 Object.defineProperty是一次性代理完所有的数据,如果对象嵌套很深就会一直递归直到代理完所有属…

遇到JSON文件就头大?掌握Python这几种方法,让你轻松应对

目录 1、标准库json模块 📄 1.1 json.load()函数介绍 1.2 json.loads()处理字符串 1.3 使用json.dump()写入JSON 1.4 json.dumps()美化输出 1.4 错误处理与编码问题 1.5 高效读取大文件技巧 2、第三方库simplejson加持 🔧 2.1 安装与导入simplejson 2.2 性能优势与…

A.计算圆周率——无穷级数法

描述 圆周率π可以用无穷级数表示&#xff1a; 左边的展式是一个无穷级数&#xff0c;被称为莱布尼茨级数&#xff08;Leibniz&#xff09;&#xff0c;这个级数收敛到π/4&#xff0c;它通常也被称为格雷戈里-莱布尼茨级数&#xff0c;用以纪念莱布尼茨同时代的天文学家兼数…

解决css文本内容为符号不会换行问题

错误样式如上&#xff0c;超出了规定的文本区域。 在css上增加word-wrap: break-word;即可。

电商价格监测对于品牌渠道管控的重要性

当品牌开启经销渠道或涉足电商渠道时&#xff0c;必须着手进行线上线下价格监测。只有监控到电商价格&#xff0c;才能明晰出货后的商品历经多轮市场演绎后的实际价格&#xff0c;进而了解市场需求下的真实低价行为。借助力维网络开发的电商价格监测系统&#xff0c;品牌商能知…

uni-app利用renderjs实现安卓App上jssip+freeswitch+webrtc音视频通话功能

效果图 前置知识 利用renderjs在app端加载for web库 JsSIPFreeSwitchVue实现WebRtc音视频通话 原始模块 <template><viewclass"test-sip":userExtension"userExtension":change:userExtension"JsSIP.handleUserExtenSionChange":tar…

Python邮箱发送如何设置?Python发信方法?

Python邮箱发送邮件需要哪些库&#xff1f;怎么使用Python发信&#xff1f; Python的强大之处在于其丰富的库和模块&#xff0c;使得开发者可以轻松地实现各种功能&#xff0c;包括通过电子邮件发送信息。AokSend将介绍如何在Python中设置和发送电子邮件&#xff0c;以及相关的…