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}));
})
相关推荐
源码获取_wx:Fegn0895几秒前
基于springboot + vue物业管理系统
java·开发语言·vue.js·spring boot·后端·spring·课程设计
星哥说事4 分钟前
星哥带你玩飞牛NAS-13:自动追番、订阅下载 + 刮削,动漫党彻底解放双手!
前端
donecoding13 分钟前
前端AI开发:为什么选择SSE,它与分块传输编码有何不同?axios能处理SSE吗?
前端·人工智能
安_17 分钟前
<style scoped>跟<style>有什么区别
前端·vue
姝然_952718 分钟前
Claude Code 命令完整文档
前端
wjcroom19 分钟前
web版进销存的设计到实现一
前端
无知的前端22 分钟前
Flutter常见问题以及解决方案
前端·flutter·dart
BD_Marathon34 分钟前
Vue3_Vite构建工程化前端项目
前端
武清伯MVP35 分钟前
CSS Grid布局全解析:从基础到实战的二维布局方案
前端·css·grid
xfq41 分钟前
typescript泛型枚举以及NaN传染处理
前端·typescript