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}));
})
相关推荐
ZJU_统一阿萨姆42 分钟前
【DSH】如何将 DeepSeek Harness 嵌入生产环境?万字解构 DeepSeek Agent Harness 的运行机制与安全边界
前端·javascript·安全
用户921080262861 小时前
4. 前端地图大量点位实时更新优化:后端推增量,前端做 diff
前端
SoaringHeart1 小时前
Flutter最佳实践:Web项目中文字体首次加载乱码问题解决
前端·flutter
西安小哥2 小时前
破局与重生:大厂前端如何借力 AI 转型“超级全栈“
前端·人工智能
sunly_2 小时前
TypeScript总结:16、面向对象速查
前端·javascript·typescript
张元清2 小时前
React useInterval Hook:没有过期闭包的 setInterval (2026)
javascript·react.js
MXN_小南学前端2 小时前
React超长文本域中实现“返回顶部”浮动按钮
前端·javascript·react.js
学习嵌入式的小周2 小时前
Notepad++8.8.7下载安装(附安装包)
前端·notepad++
gs801403 小时前
解构 Cordis:面向“时空可组合性”的 TypeScript 元框架深度剖析
前端·javascript·typescript
Highcharts.js3 小时前
Highcharts大数据渲染模块Boost实战与参数最佳实践表
javascript·数据可视化·boost·highcharts·大数据渲染·加速配置·参数表