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

bug场景:

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

首先 理解含义

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

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

其次 排查接口返回

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

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

成品代码:

html 复制代码
<n-select
      v-model:value="selectedDemo"
      :options="selectDemoOptions"
/>

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

javascript 复制代码
const selectedDemo = ref(Number(props.getDemoId));
javascript 复制代码
onMounted(() => {
     selectDemoOptions.value = demoList.map((it) => ({ label: it.demoName, value: it.demoId}));
})
相关推荐
King禅1 分钟前
JavaScript 调试实战指南:从 console.log 到 DevTools 深度运用
javascript
大文说跨境2 分钟前
多账号环境隔离方案技术选型:指纹浏览器、VPS 与云手机的三种架构对比
java·开发语言·前端
咕白m6254 分钟前
使用 C# 将 TIFF 转换为 PDF
前端·c#
全栈项目管理程序猿6 分钟前
ArcGIS JS 基础教程(28):图层渲染顺序管理
前端·javascript
huakoh10 分钟前
MCP 工具报错走哪条通道:三条探针的最小复现检查
前端
用户0333074139516 分钟前
ParadeDB 的 pg_search 0.26 把十词 BM25 搜索从 129ms 降到 29ms
前端
不爱说话郭德纲26 分钟前
从“点点点”到一键出包:我把 uni-app x Android 离线打包做成了脚本
android·前端·uni-app
扶风ff27 分钟前
练题簿在线免费刷题:创建个人任务,把刷题、听题和模考目标放到每天的学习中
开发语言·javascript·学习·小程序
Lstone736433 分钟前
从 Jetpack Compose 到 CMP:跨平台开发学习笔记
前端
deli00737 分钟前
多加一粒沙,整堆为什么就塌了?sandpile 模型 20 万粒实测
前端