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}));
})
相关推荐
FungLeo13 小时前
React 管理后台实战 · 前端请求层怎么写?401 静默刷新、token 并发竞争、强制改密拦截一次说清
前端·react.js·前端框架
mashirro13 小时前
记一次基于ruoyi-vue新增小程序服务模块,小程序登陆相关
vue.js·小程序·mybatis
AI砖家13 小时前
React Native 打包体积优化指南:在保证功能正常的前提下把包压到最小
javascript·react native·react.js·打包优化
Vuji14 小时前
Pi 插件解剖|ssh.ts:只用 221 行,让 Agent 直接在远程机器干活
前端·人工智能·agent
漏刻有时14 小时前
Three.js 3D地图开发实录:从GeoJSON到流光飞线,一个纯前端SPA可视化引擎的12个坑
前端
clawdashi14 小时前
2026 办公 Agent 选型指南:按场景分五类,一次讲清
前端·人工智能
无糖可可果14 小时前
从零看懂 JWT 登录鉴权:一个 React Demo 的完整拆解
前端·javascript
BreezeJiang14 小时前
JWT 登录不是存个 token:React 鉴权真正要闭合的是一条数据流
javascript·react.js·axios
驳是14 小时前
代码洁癖患者会喜欢的几款 CLI 小工具
前端
Csvn14 小时前
🛋️ requestIdleCallback:把非关键任务塞进浏览器的"空闲时间",告别卡顿
前端