select下拉框,首次进入页面没有显示value的情况

news2025/1/8 12:43:10

bug场景:

类似这种bug情况排查如下:

首先 理解含义

options就是存放键值对的,id就是key,对上了它就自动把label显示

而且如果你用来当作key和label的字段,与后端返回的不一致,还可以进行更改

 其次  排查接口返回

拿上面的例子看,排查你的options里有没有value等于1的数据

最后  排查【数据类型】是否一致

 成品代码:

<n-select
      v-model:value="selectedDemo"
      :options="selectDemoOptions"
/>

打印得知接口返回的是number类型,将其转换为number 

const selectedDemo = ref(Number(props.getDemoId));
onMounted(() => {
     selectDemoOptions.value = demoList.map((it) => ({ label: it.demoName, value: it.demoId}));
})

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

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

相关文章

krpano 实现文字热点中的三角形和竖杆

krpano 实现文字热点中的三角形和竖杆 实现文字热点中的三角形和竖杆 一个后端写前端真的是脑阔疼 一个后端写前端真的是脑阔疼 一个后端写前端真的是脑阔疼 实现文字热点中的三角形和竖杆 上图看效果 v&#xff1a;2549789059

playwright 录制

一、新建项目TestProject3 二、准备swagger 三、开始录制 打开PowerShell 7 (x64) cd D:\xxx\xxx\VS2022Projects\TestProject3\TestProject3\bin\Debug\net8.0 pwsh playwright.ps1 codegen --targetcsharp -b chromium localhost:5252/swagger/index.html #支持的语言 java…

uni-app 资源引用(绝对路径和相对路径)方法汇总

文章目录 一、前言&#x1f343;二、绝对路径和相对路径2.1 绝对路径2.2 相对路径 三、引用组件四、引用js4.1 js 文件引入4.2 NPM支持 五、引用css六、引用json6.1 json文件引入 七、引用静态资源7.1 模板内引入静态资源7.2 css 引入静态资源7.3 js/uts 引入静态资源7.4 静态资…

go如何从入门进阶到高级

针对Go语言的学习&#xff0c;不同阶段应采取不同的学习方式&#xff0c;以达到最佳效果.本文将Go的学习分为入门、实战、进阶三个阶段&#xff0c;下面分别详细介绍 一、社区 Go语言中文网 作为专注于Go语言学习与推广的平台&#xff0c;Go语言中文网为开发者提供了丰富的中…

现代密码学期末重点(备考ing)

现代密码学期末重点&#xff0c;个人备考笔记哦 密码学概念四种密码学攻击方法什么是公钥密码&#xff1f;什么是对称密码&#xff1f;什么是无条件密码&#xff1f; 中国剩余定理&#xff08;必考&#xff09;什么是原根什么是阶 经典密码学密码体制什么是列置换&#xff1f; …

基于SMT32U575RIT单片机-中断练习

任务 查看手册对所有的拓展板上和相对应的底板的引脚对应的端口找到以下结论 通过STM32MX软件对各个引脚进行相应的配置 1.第一种切换模式电脑发送 #include "main.h" #include "icache.h" #include "usart.h" #include "gpio.h"/*…

KCP解读:拥塞控制

本文是系列文章中的一篇&#xff0c;内容由浅到深进行剖析&#xff0c;为了方便理解建议按顺序一一阅读。 KCP技术原理 KCP解读&#xff1a;基础消息收发 KCP解读&#xff1a;重传机制 KCP解读&#xff1a;滑动窗口 KCP解读&#xff1a;拥塞控制 本文摘取https://xiaolincodin…

HCIA-Access V2.5_8_2_EPON基本架构和关键参数

EPON数据利用方式 EPON和GPON同样只有一根光纤&#xff0c;所以为了避免双向发送数据出现冲突&#xff0c;我们同样采用WDM技术&#xff0c;那么主要利用两个波长&#xff0c;一个是1490纳米的波长&#xff0c;一个是1310纳米的波长&#xff0c;下行OLT给ONU发送数据的时候&…

如何快速上手一个鸿蒙工程

作为一名鸿蒙程序猿&#xff0c;当你换了一家公司&#xff0c;或者被交接了一个已有的业务。前辈在找你之前十分钟写了一个他都看不懂的交接文档&#xff0c;然后把一个鸿蒙工程交接给你了&#xff0c;说以后就是你负责了。之后几天你的状态大概就是下边这样的&#xff0c;一堆…

FPGA实现UART对应的电路和单片机内部配合寄存器实现的电路到底有何区别?

一、UART相关介绍 UART是我们常用的全双工异步串行总线&#xff0c;常用TTL电平标准&#xff0c;由TXD和RXD两根收发数据线组成。 那么&#xff0c;利用硬件描述语言实现UART对应的电路和51单片机内部配合寄存器实现的电路到底有何区别呢&#xff1f;接下来我们对照看一下。 …

patchwork++地面分割学习笔记

参考资料&#xff1a;古月居 - ROS机器人知识分享社区 https://zhuanlan.zhihu.com/p/644297447 patchwork算法一共包含四部分内容&#xff1a;提出了以下四个部分&#xff1a;RNR、RVPF、A-GLE 和 TGR。 1&#xff09;基于 3D LiDAR 反射模型的反射噪声消除 (RNR)&#xff…

【VScode】设置代理,通过代理连接服务器

文章目录 VScode编辑器设置代理1.图形化界面1.1 进入proxy设置界面1.2 配置代理服务器 2.配置文件&#xff08;推荐&#xff09;2.1 打开setting.json 文件2.2 配置代理 VScode编辑器设置代理 根据情况安装nmap 1.图形化界面 1.1 进入proxy设置界面 或者使用快捷键ctrl , 。…

【HarmonyOS】鸿蒙应用点9图的处理(draw9patch)

【HarmonyOS】鸿蒙应用点9图的处理&#xff08;draw9patch&#xff09; 一、前言&#xff1a; 首先在鸿蒙中是不支持安卓 .9图的图片直接使用。只有类似拉伸的处理方案&#xff0c;鸿蒙提供的Image组件有与点九图相同功能的API设置。 可以通过设置resizable属性来设置Resiza…

光伏仿真与设计系统应用架构深度剖析

在光伏产业蓬勃发展的时代背景下&#xff0c;绿虫光伏仿真与设计系统成为推动其高效发展的核心力量。其应用架构涵盖多个关键步骤&#xff0c;每个环节都紧密相扣&#xff0c;共同构建起精准且高效的设计体系。 气象分析作为开篇之笔&#xff0c;起着基石般的重要作用。系统全…

k8s dashboard离线部署步骤

确定k8s版本&#xff0c;以1.23为例。 部署metrics-server服务&#xff0c;最好用v0.5.2。 用v0.6.0&#xff0c;可能会报以下错误&#xff1a; nodekubemaster:~/Desktop/metric$ kubectl top nodes Error from server (ServiceUnavailable): the server is currently unabl…

05-Linux系统编程之进程(下)

一、子进程资源回收 1.概述 在每个进程退出的时候&#xff0c;内核释放该进程所有的资源&#xff0c;包括一些存储在栈区、全局区的数据、打开的文件、占用的内存等。但是仍有一部分信息没有释放&#xff0c;这些信息主要指进程控制块 PCB 的信息&#xff08;包括进程号、退出…

HDFS异构存储和存储策略

一、HDFS异构存储类型 1.1 冷、热、温、冻数据 通常&#xff0c;公司或者组织总是有相当多的历史数据占用昂贵的存储空间。典型的数据使用模式是新传入的数据被应用程序大量使用&#xff0c;从而该数据被标记为"热"数据。随着时间的推移&#xff0c;存储的数据每周…

【51单片机】02LED流水灯实验

点亮你的LED 一、点亮第一个LED1.GPIO介绍2.P1、P2、P3端口 二、LED实验2.尝试点亮LED3.LED流水灯 一、点亮第一个LED 1.GPIO介绍 这块内容这里可以做简单的了解&#xff0c;与数电知识强相关。后续可以再回过头来学习 GPIO (general purpose input output) 通用输入输出端口…

springboot 集成 etcd

springboot 集成 etcd 往期内容 ETCD 简介docker部署ETCD 前言 好久不见各位小伙伴们&#xff0c;上两期内容中&#xff0c;我们对于分布式kv存储中间件有了简单的认识&#xff0c;完成了docker-compose 部署etcd集群以及可视化工具 etcd Keeper&#xff0c;既然有了认识&a…

云安全相关博客阅读(一)

2024-03-04 Cloudflare announces Firewall for AI 关注问题&#xff1a; 传统的WAF功能能够保护web和api安全&#xff0c;但是随着LLM等AI模型等出现&#xff0c;保护这些AI相关应用等安全是一个新出现的问题虽然AI应用是新的场景&#xff0c;但是以往的攻击方法也能够直接用…