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}));
})
相关推荐
TYC913 小时前
Mac创建Vue3+TypeScript或者React+TypeScript项目
前端·javascript·typescript
程序员小孔.13 小时前
基于 SpringBoot + UniApp + Vue 的家政服务系统设计与实现
前端·数据库·spring boot·python·docker·微信小程序
Profile排查笔记13 小时前
指纹浏览器 GitHub 项目怎么选?先看仓库交付的是工具、内核还是管理器
前端·人工智能·后端·自动化
风骏时光牛马13 小时前
云原生驱动的分布式高可用架构设计与落地实践
前端
梦曦i13 小时前
uni-app x 专属 Pinia 库正式发布
前端·pinia·uni-app x
一次旅行14 小时前
DeepSeek‑V4.1‑Flash‑1017完整解读:模型升级+Search/Fetch搜索API开放,Agent开发者要注意哪些坑
前端·网络·人工智能
gc_22991 天前
Vue框架学习(1:环境搭建)
vue.js
原则猫1 天前
UDP 到底怎么实现可靠的
前端
Java后端的Ai之路1 天前
14、ReactJS - 路由(Router)
前端·react.js·状态模式
持敬chijing1 天前
白盒测试与代码审计-js登录逆向实战
javascript·网络·安全·web安全·网络安全·网络攻击模型