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}));
})
相关推荐
Excel_VBA表格จุ๊บ2 小时前
wps宏js接入AI功能和接入翻译功能
javascript·wps·js宏
豪宇刘3 小时前
JavaScript 延迟加载的方法
开发语言·javascript
顾尘眠3 小时前
http常用状态码(204,304, 404, 504,502)含义
前端
摇光933 小时前
js迭代器模式
开发语言·javascript·迭代器模式
王先生技术栈5 小时前
思维导图,Android版本实现
java·前端
悠悠:)5 小时前
前端 动图方案
前端
anyup_前端梦工厂5 小时前
了解 ES6 的变量特性:Var、Let、Const
开发语言·javascript·ecmascript
星陈~5 小时前
检测electron打包文件 app.asar
前端·vue.js·electron
Aatroox5 小时前
基于 Nuxt3 + Obsidian 搭建个人博客
前端·node.js
每天都要进步哦6 小时前
Node.js中的fs模块:文件与目录操作(写入、读取、复制、移动、删除、重命名等)
前端·javascript·node.js