如何让v-autocomplete的下拉选项同时显示文本与值？

修改思路 #

放弃依赖item-text的默认渲染逻辑，通过Vuetify的v-slot:item插槽自定义下拉项内容，实现文本与对应值的同时展示。

修改后的完整代码 #

HTML部分

<v-autocomplete
  v-model="request"
  v-if="products.length"
  :items="products"
  outline
  chips
  label="Select item"
  item-value="value"
>
  <!-- 自定义下拉选项模板 -->
  <template v-slot:item="{ item }">
    <div class="d-flex justify-content-between w-100">
      <span>{{ item.text }}</span>
      <span class="text-muted">{{ item.value }}</span>
    </div>
  </template>
</v-autocomplete>

JS部分

products: [
  {
    text: "Apple",
    value: 209
  },
  {
    text: "Banana",
    value: 229
  }
]

关键说明 #

• 移除原有的item-text属性，通过插槽完全控制下拉项的渲染内容
• 利用v-slot:item="{ item }"获取当前遍历的选项数据，同时渲染item.text和item.value
• 使用Vuetify内置的flex布局类d-flex justify-content-between让文本与值左右对齐，text-muted类让值显示为灰色，区分主次内容
• 保留item-value="value"确保选中后v-model="request"绑定的是选项的value字段（如209/229）

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