Vue中下拉框绑定对象需用唯一字段（如id）作value，v-model绑定基础类型，再通过find映射回对象；el-select等组件支持对象绑定但需配置value-key并确保引用一致。
Vue 模板中给下拉框（<select></select>）绑定对象类型选项，不能直接用 v-model 绑定整个对象——因为原生 <select></select> 的 value 属性只接受字符串、数字或布尔值，不支持对象序列化。必须通过“用唯一字段做 value，再映射回对象”来实现逻辑上的“选中对象”。
用 id 或其他唯一 key 作为 value 值
这是最推荐、最稳定的做法：让 v-model 绑定一个基础类型（如 id），再通过该值从选项列表中查找对应对象。
- 模板中每个
<option></option>的:value设为对象的唯一标识（如dept.id） -
v-model绑定一个响应式变量（如selectedId），类型为number | string | null - 需要对象时，用计算属性或方法根据
selectedId查找：deptList.find(d => d.id === selectedId)
使用 el-select 等 UI 组件库（如 Element Plus）
如果项目用了 el-select，它原生支持对象值绑定（需配合 :value-key 和 v-model:value）：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 设置
:value-key="id"告诉组件用哪个字段做比较依据 -
v-model可直接绑定完整对象（如ref<dept>()</dept>） - 注意：必须确保选项数组和选中值中的对象是同一引用，或启用
:reserve-key避免因重新请求导致引用丢失
避免踩坑：不要直接 v-model="deptObject"
以下写法不可靠，会导致选中失效或双向同步异常：
立即学习“前端免费学习笔记（深入）”；
-
<option :value="dept">{{ dept.name }}</option>（value 是对象） -
v-model="selectedDept"绑定对象（原生 select 不支持） - 即使看似能显示，切换后
selectedDept可能变成字符串"[object Object]"或null
动态加载时确保赋值时机正确
如果部门列表来自接口，务必等 deptList 渲染完成后再设置 selectedId：
- 在
onMounted中先请求数据，再赋值selectedId.value = 102 - 不要在
setup顶层就赋值，否则选项尚未生成，v-model 无处匹配 - 可加一层判断：
if (deptList.value.some(d => d.id === targetId)) selectedId.value = targetId
