Vue.js Vuetify v-select如何渲染API返回的对象属性？

云上老周

2026-7-15

解决Vuetify v-select显示[object Object]的问题

问题原因

字段不匹配：你设置了item-text="expedition"，但expeditions数组里的对象根本没有expedition属性，只有value字段。v-select找不到要展示的文本，只能把对象转成默认字符串[object Object]。
item-value绑定错误：:item-value="'deliveryData.expedition'"写法不对，绑定属性时不需要用引号包字符串，直接写对象里的属性名就行。

修正方案

1. 匹配数据结构与item-text

如果后端返回的expeditions每个对象包含「显示文本」和「对应值」，比如结构是这样：

expeditions: [
  {
    expedition: "快递A", // 要显示的文本
    value: "deliveryData.expeditionA" // 对应的值
  },
  {
    expedition: "快递B",
    value: "deliveryData.expeditionB"
  }
]

那v-select可以这么写：

<v-select
  label="Expedition"
  :items="expeditions"
  item-text="expedition"
  item-value="value"
  class="custom-select-field"
  variant="underlined"
></v-select>

2. 直接用现有字段作为显示文本

如果后端返回的对象只有value字段，或者你想把value当成显示文本，直接把item-text设为"value"：

<v-select
  label="Expedition"
  :items="expeditions"
  item-text="value"
  item-value="value"
  class="custom-select-field"
  variant="underlined"
></v-select>

3. 自定义选项显示（灵活方案）

如果需要更复杂的展示逻辑，用作用域插槽自定义选项内容：

<v-select
  label="Expedition"
  :items="expeditions"
  item-value="value"
  class="custom-select-field"
  variant="underlined"
>
  <template v-slot:item="{ item }">
    <!-- 这里可以自由拼接或渲染内容 -->
    <span>{{ item.value }}</span>
  </template>
</v-select>