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}));
})
相关推荐
FungLeo7 小时前
成为全栈·React 管理后台篇·总复盘:从“接口能调通”到“后台值得使用”
前端·react.js·前端框架·项目复盘·成为全栈
Csvn9 小时前
并发模式:让渲染学会排队、插队和让路
前端
可乐鸡翅yeah_9 小时前
新手梳理:M3U8 线上问题,哪些是前端锅,哪些是后端锅
前端·ios·音视频·实时音视频·m3u8·音视频在线播放
Flynt9 小时前
Linear 用 1000 个 PR 换掉 styled-components,我写了 200 个按钮,把这笔账复现了一遍
前端·css·preact
JavaGuide10 小时前
NVIDIA 又开源了!这次给 AI Agent 加上权限管控
前端·后端
excel10 小时前
prisma 如何处理数据库竞态
前端·数据库·后端
莪_幻尘11 小时前
Skill 体检:30 个 Skill 全凭感觉?体检器先自曝了 8 个“假 0 分
前端·人工智能·llm
风骏时光牛马11 小时前
AI模型综合能力评测:性能、指令遵循与多场景实测对比
前端
Frag0ut11 小时前
Chrome与Chromium内核浏览器在Windows 11上的新特性全景解析
前端·chrome·windows·web安全·chromium·gemini ai·playready drm
hiahiahia12312 小时前
实现完整 Tool Dispatcher
开发语言·前端