Vue JS v-select编辑数据时仅显示ID，无法展示对应文本的问题求助

问题核心在于v-select无法直接将数字类型的project_id与对象格式的options做映射匹配，需要调整选项结构并配置组件属性来实现显示对应文本的需求。

解决方案步骤： #

1. 将对象格式的options转换为数组格式
   v-select更适配数组类型的选项，每个选项需包含value（对应绑定的ID值）和label（要显示的文本）两个字段。同时注意将options的键转为数字类型，与project_id的类型保持一致，避免匹配失败。

// 在computed中转换，确保响应式
optionsArray() {
  return Object.entries(this.options).map(([value, label]) => ({
    value: Number(value),
    label
  }))
}

2. 配置v-select组件
   绑定转换后的数组选项，指定显示的标签字段，并正确绑定编辑数据的project_id值：

<div v-for="(item, index) in detailPresensi.detail_data" :key="item.id">
  <v-select
    :options="optionsArray"
    :value="item.project_id"
    label="label"
    @input="(val) => item.project_id = val"
  ></v-select>
</div>

完整示例代码： #

<template>
  <div>
    <div v-for="(item, index) in detailPresensi.detail_data" :key="item.id">
      <v-select
        :options="optionsArray"
        :value="item.project_id"
        label="label"
        @input="(val) => item.project_id = val"
        placeholder="选择项目"
      ></v-select>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detailPresensi: {
        detail_data: [{
          "id": 3,
          "project_id": 1,
          "duration_minute": 300,
          "detail": "Text 1"
        }, {
          "id": 4,
          "project_id": 2,
          "duration_minute": 203,
          "detail": "Text 2"
        }]
      },
      options: {
        "1": "AAA",
        "2": "BBB",
        "3": "CCC",
      }
    }
  },
  computed: {
    optionsArray() {
      return Object.entries(this.options).map(([value, label]) => ({
        value: Number(value),
        label
      }))
    }
  }
}
</script>

补充说明： #

• 如果使用的是旧版vue-select，可能需要将label="label"替换为option-label="label"，或者通过自定义插槽来渲染选项文本：

<v-select :options="optionsArray" :value="item.project_id">
  <template #option="{ option }">
    {{ option.label }}
  </template>
</v-select>

• 确保value的类型与project_id完全一致（都是数字），否则v-select无法正确匹配选中项并显示对应标签。

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