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}));
})
相关推荐
水煮白菜王4 分钟前
高德地图"未获得商用授权"水印临时移除方案
前端·javascript
库拉AI小李5 分钟前
# 数据清洗与分析:Gemini 3.5 处理 Excel 数据的实操体验
前端·人工智能·后端
小小小小宇6 分钟前
React17 18 19 新增能力、解决问题、原理与使用详解
前端
chushiyunen6 分钟前
vue el-pagination实现分页
javascript·vue.js·elementui
by————组态8 分钟前
Ricon组态可视化编辑器 - 所见即所得的工业画布
前端·javascript·物联网·架构·编辑器·组态
Csvn11 分钟前
面试翻车现场:`Array(100).map(() => 1)` 为什么全为空?
前端
光影少年14 分钟前
react大列表优化:虚拟列表原理
前端·javascript·react.js
星栈19 分钟前
一套 Rust 代码跑三端:为什么我开始关注 Dioxus
前端·rust·前端框架
lichenyang45322 分钟前
从两个 demo 说起:WebSocket 和 SSE 到底差在哪?
前端
如烟花的信页29 分钟前
外贸*登录逆向分析
javascript·爬虫·python·js逆向