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}));
})
相关推荐
❆VE❆11 分钟前
WebSocket与SSE深度对比:技术差异、场景选型及一些疑惑
前端·javascript·网络·websocket·网络协议·sse
rgeshfgreh16 分钟前
Java高性能开发:Redis7持久化实战
前端·bootstrap·mybatis
李剑一40 分钟前
uni-app使用html5+创建webview,可以控制窗口大小、显隐、与uni通信
前端·trae
Hooray1 小时前
2026年,站在职业生涯十字路口的我该何去何从?
前端·后端
小二·1 小时前
Python Web 开发进阶实战:安全加固实战 —— 基于 OWASP Top 10 的全栈防御体系
前端·python·安全
over6971 小时前
🌟 JavaScript 数组终极指南:从零基础到工程级实战
前端·javascript·前端框架
社恐的下水道蟑螂1 小时前
深入掌握 AI 全栈项目中的路由功能:从基础到进阶的全面解析
前端·react.js·全栈
米诺zuo1 小时前
Angular 18 核心特性速查表
前端
源猿人1 小时前
前端批量请求的并发控制与工程化实践
javascript
hey_ner1 小时前
进度条图表简单化
前端·css·css3