el-select绑定值的坑

碰到一个问题,选择框的数据是后端传过来的,下拉框的数据也是后端传过来的,但是打开下拉框时,发现数据没有高亮。

最后发现,只要选择框v-model给的值和option的value绑定的值一致,就可以高亮。

大多数情况下,都绑定的是value值(下图的name),所以发现不了这个问题。

其实两个都绑定id也是可以的,只要两个绑定的一致就行。

<el-select v-model="form" class="m-2" placeholder="Select" size="large"><el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.id" /> //value绑定的值是id
</el-select>const options = [{id: '123',name: '名字一'},{id: '456',name: '名字二'},{id: '789',name: '名字三'}
]let form= ref('123') //v-model给的值也是id

不是说,form给的值是什么就显示什么,这里form给123,但是选择框显示的还是名字一。

因此,option的label决定了显示。

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

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

相关文章

STM32F4 HAL流水灯Proteus仿真

源码下载&#xff1a;https://download.csdn.net/download/zlkk00/88654405

每日一练2023.12.23——考试座位号【PTA】

题目链接&#xff1a;L1-005 考试座位号 题目要求&#xff1a; 每个 PAT 考生在参加考试时都会被分配两个座位号&#xff0c;一个是试机座位&#xff0c;一个是考试座位。正常情况下&#xff0c;考生在入场时先得到试机座位号码&#xff0c;入座进入试机状态后&#xff0c;系…

elasticsearch 与 mysql的概念对比

文档 elasticsearch是面向文档存储的&#xff0c;可以是数据库中的一条商品数据&#xff0c;一个订单信息。 文档数据会被序列化为json格式后存储在elasticsearch中。 索引(Index) 索引(index):相同类型的文档的集合映射(mapping):索引中文档的字段约束信息&#xff0c;类似…

什么是接口自动化测试?接口自动化测试的目的是什么?

1、什么是接口测试 接口测试是对系统或组件之间的接口的测试。主要用于检测外部系统与系统间以及内部各个子系统间的交互点。测试重点是检查数据交换、传递和控制管理过程&#xff0c;以及系统间的相互逻辑依赖关系等。 2、接口测试的目的 1> 尽早介入软件测试流程&#xf…

web架构师编辑器内容-改进字体下拉菜单

前面说到我们可以通过面板配置来更新画布上面的一些属性&#xff0c;如果我们有这样一个需求&#xff1a;在右侧面板配置里面需要查看字体的样式效果我们应该怎么做呢&#xff1f; 我们一开始字体的渲染&#xff1a; const fontFamilyArr [{value: "SimSun","…

freeswitch on debian docker

概述 freeswitch是一款简单好用的VOIP开源软交换平台。 因为centos系统期限的原因&#xff0c;尝试在debian的docker上使用fs。 环境 docker engine&#xff1a;Version 24.0.6 debian docker&#xff1a;bullseye 11.8 freeswitch&#xff1a;v1.10.7 Debian准备 目前…

半导体晶圆制造SAP:助力推动新时代科技创新

随着科技的迅猛发展&#xff0c;半导体行业成为了推动各行各业进步的重要力量。而半导体晶圆制造作为半导体产业链的核心环节&#xff0c;其效率和质量的提升对于整个行业的发展起着决定性的作用。在这个高度竞争的行业中&#xff0c;如何提升制造过程的效率、降低成本&#xf…

MySQL——Ubuntu20使用deb安装MySQL远程连接数据库服务器

MySQL的下载和安装 1. 下载 进入MySQL官网进行下载&#xff1a;MySQL官网下载地址 下载的文件默认放到Home/Downloads目录下 我这里选择了跟 系统版本及CPU架构对应 8.0.26 Ubuntu20.04 x86_64bit 版本进行了下载&#xff1a;mysql-server_8.0.26-1ubuntu20.04_amd64.deb-b…

【深度学习】DataComp论文,数据集介绍,大数据模型的数据集介绍

参考&#xff1a; https://laion.ai/blog/datacomp/ 论文&#xff1a;https://arxiv.org/abs/2304.14108 文章目录 论文报告的一些内容datacomp-1B 数据质量比lainon2B要好不同规模数据有多少数据数据处理数据来源 论文报告的一些内容 摘要 多模态数据集是近期如CLIP、Stable …

【Matlab in VSCode】在VSCode中编辑MATLAB文件

【Matlab in VSCode】在VSCode中编辑MATLAB文件 1.安装插件 插件&#xff1a;在vscode拓展商店下载 MATLABMatlab in VSCode 其他&#xff1a;Windows环境MATLAB2019bpython3.7.9 2.插件配置 MATLAB插件下载后不用配置。 Matlab in VSCode需要进行相应的配置。 Windows…

从CTF中学习自增构造webshell

FLAG&#xff1a;那天晚上和你聊了很久&#xff0c;手机烫的和心脏一样 专研方向: 代码审计&#xff0c;Crypto 每日emo&#xff1a;天一亮&#xff0c;时间就不属于我了 从CTF中学习自增构造webshell 前言1.异或2.自增3.取反青少年CTF之ezbypass 前言 今天写了几道代码审计的…

.net core webapi 大文件上传到wwwroot文件夹

1.配置staticfiles(program文件中) app.UseStaticFiles();2.在wwwroot下创建upload文件夹 3.返回结果封装 namespace webapi;/// <summary> /// 统一数据响应格式 /// </summary> public class Results<T> {/// <summary>/// 自定义的响应码&#xff…