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}));
})
相关推荐
触底反弹5 小时前
🔥 别再只用 useRef 拿 DOM 了!这 5 个实战场景让你彻底理解它(附源码解析 + 面试题)
前端·javascript·react.js
小锋java12345 小时前
【技术专题】Vue3 - 列表渲染
vue.js·vite
玉宇夕落5 小时前
useRef + Web Worker —— 从零到一理解React多线程协作原理
前端
用户6919026813395 小时前
React useRef、useEffect、useState 与 Web Worker 多线程实践
前端
BreezeJiang5 小时前
Web Worker 不负责渲染:React 中的线程分工与消息闭环
javascript·react.js
烬羽5 小时前
useContext 用是用了,但你真的用对了吗?——把 Context 封装进自定义 Hook
前端·react.js·全栈
做前端的娜娜子5 小时前
JavaScript 闭包
前端·javascript·掘金·金石计划
xiaominlaopodaren5 小时前
three.js地图数学基础(一)
前端·three.js
何时梦醒5 小时前
🎯 从零彻底搞懂 React Context API —— 一篇带你穿越"组件树"的状态共享方案
前端·javascript·react.js
渣波5 小时前
拒绝页面假死!React 并发编程实战:Web Worker + useRef 深度解析与高性能计算架构
前端·javascript