Vuetify combobox选中后显示id而非item-text问题如何解决？

问题根因 #

你设置了:return-object="false"，此时v-model绑定的supplier.supplier_type存储的是选中项的id值（即item-value指定的字段值）而非完整的选项对象。因此selection插槽中拿到的item本质上是id值，没有name属性，自然无法显示预期文本。 #

解决方法1：调整return-object配置（最简单） #

将:return-object="false"改为:return-object="true"，让v-model直接绑定完整的选项对象，此时插槽中的item会包含完整的id、name字段，原有自定义插槽逻辑即可正常生效。
如果后续业务提交需要仅提交id，提交时取supplier.supplier_type.id即可。
修改后代码示例：

<v-combobox 
  v-model="supplier.supplier_type" 
  maxlength="255" 
  :items="company.supplier_types" 
  item-text="name" 
  item-value="id" 
  :label="$t('supplier.supplier_types')" 
  :hide-no-data="true" 
  outlined 
  :error-messages="errors" 
  :return-object="true"
>
  <template v-slot:selection="{ item }">
    {{ item.name }}
  </template>
  <template v-slot:item="{ on, item }">
    <v-list-item v-on="on">
      {{ item.name }}
    </v-list-item>
  </template>
</v-combobox>

解决方法2：保留return-object=false，自定义匹配逻辑 #

如果你确实需要让v-model仅存储id值，可以新增一个工具方法根据id匹配对应的文本，在selection插槽中调用该方法显示内容：

1. 先在方法中新增匹配逻辑：

methods: {
  getSupplierTypeName(id) {
    const target = this.company.supplier_types.find(item => item.id === id)
    return target ? target.name : ''
  }
}

2. 修改combobox的selection插槽：

<template v-slot:selection="{ item }">
  {{ getSupplierTypeName(item) }}
</template>

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