v-model 无法直接绑定对象,需用唯一 ID 作为 value 并映射还原;多选时绑定 ID 数组再查找对象;自定义组件可通过 value-key 提取字段实现对象 v-model。

v-model 默认只绑定 option 的 value 字符串或基础类型值,不能直接绑定整个对象。如果下拉选项是对象数组(比如 { id: 1, name: '研发部' }),想让 v-model 选中后保存的是完整对象,需要手动处理 —— 核心是把对象序列化为唯一标识,并在回显时还原。
用 :value 绑定对象(不推荐)
虽然 Vue 允许在 <option></option> 上写 :value="obj",但实际会转成字符串 [object Object],多个选项的 value 就全一样了,失去区分度,无法正确回显或比对。所以这种方式不可靠,应避免。
用字符串 ID 做 value,配合映射还原对象
这是最常用、最稳妥的做法:选项用 id(或其他唯一字段)作为 value,v-model 绑定该 ID;再维护一个对象映射表(如 optionsMap),根据选中的 ID 查出对应对象。
从零开始编排 SpringBoot+Vue 全栈项目工作流,适用于新建全栈项目或完整脚手架请求,触发后依次调用 product‑spec‑builder(需求调研)等模块。
-
模板中:用
item.id作:value,v-model绑定selectedId -
脚本中:定义
selectedId = ref(null)和options = ref([{ id: 1, name: '研发部' }, ...]) -
获取当前选中对象:用计算属性或方法,如
const selectedObj = computed(() => options.value.find(o => o.id === selectedId.value) || null)
多选场景下处理对象数组
当 <select multiple></select> 且选项为对象时,同样不能直接 :value="obj"。应:
立即学习“前端免费学习笔记(深入)”;
- 将
v-model绑定到 ID 数组,如selectedIds = ref([1, 3]) - 通过
selectedIds.value.map(id => options.value.find(o => o.id === id))得到选中的对象数组 - 注意:确保 ID 类型一致(比如后端返回字符串 ID,前端就别用数字比较)
自定义组件中支持对象 v-model(进阶)
如果你封装了一个下拉选择组件,并希望它原生支持对象类型的 v-model,需在组件内:
- 接收
modelValue(即对象或对象数组) - 内部用唯一 key(如
value-keyprop)提取比对字段,例如item[valueKey] - 触发
update:modelValue时,传回原始对象,而非仅 ID - 这样调用方才能真正实现 “v-model 绑定对象” 的语义

















