v-combobox选中显示item-value而非item-text，如何改为显示item-text？

我来帮你排查这个问题——这种情况我之前也遇到过，核心原因是组件没办法正确把你选中的item-value（也就是id）映射回对应的item-text（name），所以只能直接显示v-model里存的id值。下面分情况给你解决方案：

可能的原因及对应解决办法 #

1. 先检查你的statuses数组结构是否正确 #

这是最常见的问题！如果你的statuses里的项没有正确的id和name属性，或者格式不匹配，组件根本找不到对应项来显示name。举个正确的数组示例：

// 确保每个项都有id和name字段
statuses: [
  { id: 1, name: "已激活" },
  { id: 2, name: "已禁用" },
  { id: 3, name: "待审核" }
]

如果你的数组结构和这个不一样（比如键名写错了，比如把name写成了label），组件自然没法匹配，只能显示v-model里的id。

2. 最简单的解决：把return-object设为true #

如果你的业务场景允许v-model存储整个对象，这是最省心的办法。当return-object="true"时，v-model会直接保存选中的完整项，组件会自动显示item-text对应的name，完全不用操心映射问题。修改后的代码：

<v-combobox 
  v-model="searchVm.contains.status" 
  :items="statuses" 
  label="Status" 
  item-text="name" 
  item-value="id" 
  return-object="true"
></v-combobox>

这时候searchVm.contains.status会是类似{id:1, name:"已激活"}的对象，后续需要用id的话，直接取searchVm.contains.status.id就好。

3. 必须保持return-object="false"的情况 #

如果你因为业务限制只能让v-model存id，那可以试试这两个办法：

• 确保v-model初始值是合法的id：如果searchVm.contains.status的初始值是一个不存在于statuses里的id，组件找不到对应项，就会直接显示这个值。所以初始值要设为statuses里存在的id，或者空值。
• 用custom-text自定义显示文本：通过这个prop强制指定显示的内容，确保组件能正确映射id到name：

<v-combobox 
  v-model="searchVm.contains.status" 
  :items="statuses" 
  label="Status" 
  item-text="name" 
  item-value="id" 
  :return-object="false"
  :custom-text="(item) => item ? item.name : ''"
></v-combobox>

这个函数会在组件需要显示文本时调用，直接返回对应项的name。

另外还有个小细节：如果statuses是异步加载的（比如从接口获取），要确保组件在数据加载完成后再渲染，比如用v-if="statuses.length > 0"包裹，避免组件初始化时因为没有数据而显示id。

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