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}));
})
相关推荐
李明卫杭州5 分钟前
Vue 3 `markRaw` 详解:什么时候该让一个对象"别被代理"
vue.js
申君健24864182772027 分钟前
# WebGPU 的渲染原理与 Shader
前端
用户831348593069813 分钟前
Vue+Threejs实现人物奔跑场景
vue.js·webgl·three.js
随风123weber16 分钟前
从前端响应式到后端背压:深度拆解生成式 UI(Generative UI)
前端
用户0595401744619 分钟前
用 Pytest 接管大模型记忆存储测试,状态一致性问题减少 90%
前端·css
IT_陈寒20 分钟前
JavaScript的异步地狱里,我的Promise掉进了微任务陷阱
前端·人工智能·后端
嘟嘟071725 分钟前
大前端工程师必学:用 BFF 架构搭建安全的 AI 流式应用
前端
meilindehuzi_a43 分钟前
Vue 项目中的前端 BFF:跨域代理与流式请求实战
前端·javascript·vue.js
小则又沐风a1 小时前
库的原理:目标文件,ELF格式,程序加载
java·linux·前端
程序员爱钓鱼1 小时前
Rust if let 与 while let 详解:简化模式匹配
前端·后端·rust