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}));
})
相关推荐
小只笨笨狗~1 分钟前
解决objectSpanMethod与expand共存时展开后表格错位问题
开发语言·javascript·ecmascript
None3211 分钟前
NestJS 流式文件上传实践:从 Multer 到 Busboy 的进阶之路
前端·后端
海浪浪3 分钟前
Symbol 产生的背景以及应用场景
前端·javascript
DROm RAPS12 分钟前
十七:Spring Boot依赖 (2)-- spring-boot-starter-web 依赖详解
前端·spring boot·后端
OpenTiny社区12 分钟前
GenUI SDK v1.1.0 正式发布|全端体验革新,能力与稳定性进阶
前端·ai编程
IAUTOMOBILE14 分钟前
Code Marathon 项目源码解析与技术实践
java·前端·算法
Flying pigs~~14 分钟前
基于Deepseek大模型API完成文本分类预测功能
java·前端·人工智能·python·langchain·deepseek
名字很费劲25 分钟前
vue项目,刷新后出现404错误,怎么解决
前端·javascript·vue·404
ZzT35 分钟前
深扒 Claude Code Buddy 模式:一只仙人掌背后的确定性随机算法
前端
cch891837 分钟前
PHP vs Go:Web开发选谁更胜一筹?
前端·golang·php