Vuetify 3 Combobox：如何获取同名选中项的ID？

问题核心 #

你当前的实现把items映射成了纯名称字符串数组，导致v-model只能获取到重复的名称，无法关联唯一ID。要解决这个问题，需要让Combobox直接处理原始对象数组，而非仅传递名称。

解决方案 #

1. 直接使用原始对象数组作为items

不要通过map转换为名称数组，直接传入包含id和name的对象数组。

2. 配置显示字段与绑定规则

通过item-title指定下拉选项显示的文本（即name字段），同时启用return-object属性，让v-model返回选中的完整对象（包含id）。

完整代码示例

<template>
  <v-combobox
    v-model="selectedItem"
    label="Search..."
    :items="items"
    item-title="name"
    return-object
    @update:model-value="handleSelection"
  ></v-combobox>
</template>

<script setup>
import { ref } from 'vue'

const items = ref([
  { id: 1, name: "Same Name" },
  { id: 2, name: "Same Name" },
  { id: 3, name: "Same Name" }
])

const selectedItem = ref(null)

const handleSelection = (item) => {
  if (item) {
    console.log("选中项ID:", item.id)
    // 这里可以处理ID相关逻辑
  }
}
</script>

关键说明 #

• item-title="name"：告诉Combobox用对象的name字段作为下拉选项的显示文本
• return-object：让v-model绑定的变量接收选中的完整对象，而非仅名称或指定值
• @update:model-value：监听选中项变化，此时可以直接从回调参数中获取id

替代方案（不使用return-object） #

如果你只想绑定id而非整个对象，可以配置item-value="id"，同时保留item-title="name"，此时v-model会直接返回选中项的id：

<v-combobox
  v-model="selectedId"
  label="Search..."
  :items="items"
  item-title="name"
  item-value="id"
></v-combobox>

<script setup>
const selectedId = ref(null)
// 选中后selectedId直接是对应的ID值
</script>

内容的提问来源于stack exchange，提问作者Tenarius