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}));
})
相关推荐
o***Z4484 分钟前
前端性能优化案例
前端
张拭心8 分钟前
前端没有实际的必要了?结合今年工作内容,谈谈我的看法
前端·ai编程
姜太小白16 分钟前
【前端】CSS媒体查询响应式设计详解:@media (max-width: 600px) {……}
前端·css·媒体
weixin_4111918423 分钟前
flutter中WebView的使用及JavaScript桥接的问题记录
javascript·flutter
HIT_Weston28 分钟前
39、【Ubuntu】【远程开发】拉出内网 Web 服务:构建静态网页(二)
linux·前端·ubuntu
百***060128 分钟前
SpringMVC 请求参数接收
前端·javascript·算法
天外天-亮44 分钟前
Vue + excel下载 + 水印
前端·vue.js·excel
起个名字逛街玩1 小时前
前端正在走向“工程系统化”:从页面开发到复杂产品架构的深度进化
前端·架构
用户47949283569151 小时前
React 渲染两次:是 Bug 还是 Feature?聊聊严格模式的“良苦用心”
前端·react.js·前端框架
用户47949283569151 小时前
Code Review 惊魂:同事的“优雅”重构,差点让管理员全部掉线
javascript