v-select搜索选中选项后标签显示ID而非nome，寻求解决办法

问题描述 #

初始状态下功能正常，但使用搜索栏找到选项并选中后，v-select的标签显示ID而非配置的nome字段；未使用搜索或通过分页按钮选择选项时，标签能正常显示nome字段。

模板代码 #

<v-select
    class="vselect"
    v-model="filtro.orgao_origem_id"
    id="selectOrgaoOrigem"
    :options="paginated"
    :reduce="nome => nome.id"
    label="nome"
    placeholder="Todos"
    :filterable="false"
    @search="onSearch">
       <button :disabled="!hasPrevPage" @click.prevent="offset -= limit">
         Anterior
       </button>
       <button :disabled="!hasNextPage" @click.prevent="offset += limit">
         Próxima
       </button>
</v-select>

脚本代码 #

data() {
  return {
    orgaosConveniados: [],
    optionsOrgaosConveniados: [],
    search: '',
    offset: 0,
    limit: 10,
    filtro: {
      orgao_origem_id: null,
      orgao_destino_id: null,
    },
  };
},
methods: {
  onSearch(query) {
    this.search = query
    this.offset = 0
  },
},
computed: {
  filtered() {
    return this.orgaosConveniados.filter(
    (orgao) =>orgao.nome.toLowerCase()
    .includes(this.search.toLowerCase()))
  },
  paginated() {
    return this.filtered
    .slice(this.offset, this.limit + this.offset)
  },
  hasNextPage() {
    const nextOffset = this.offset + this.limit
    return Boolean(this.filtered
    .slice(nextOffset, this.limit + nextOffset).length)
  },
  hasPrevPage() {
    const prevOffset = this.offset - this.limit
    return Boolean(this.filtered
    .slice(prevOffset, this.limit + prevOffset).length)
  },
},

问题原因 #

使用reduce prop后，v-model绑定的是选项的id而非完整对象。当通过搜索选中选项后，当前的paginated列表可能因为搜索过滤或分页，无法找到对应的完整对象，导致v-select无法通过label字段获取显示文本，只能直接显示ID。

修复方案 #

方案1：添加getOptionLabel映射显示文本 #

保留reduce让v-model绑定ID，同时通过getOptionLabel prop手动指定如何根据ID获取对应的nome字段：

<v-select
    class="vselect"
    v-model="filtro.orgao_origem_id"
    id="selectOrgaoOrigem"
    :options="paginated"
    :reduce="item => item.id"
    label="nome"
    placeholder="Todos"
    :filterable="false"
    @search="onSearch"
    :getOptionLabel="(value) => {
      // 从完整列表中查找对应ID的选项
      const targetItem = this.orgaosConveniados.find(item => item.id === value)
      return targetItem ? targetItem.nome : ''
    }">
       <button :disabled="!hasPrevPage" @click.prevent="offset -= limit">
         Anterior
       </button>
       <button :disabled="!hasNextPage" @click.prevent="offset += limit">
         Próxima
       </button>
</v-select>

这个方法适合需要保持v-model为ID的场景，确保无论选中的选项是否在当前分页/过滤列表中，都能正确显示nome。

方案2：移除reduce，绑定完整对象 #

修改v-model直接绑定选项对象，让v-select自动使用label字段显示文本：

1. 先在data的filtro中添加orgao_origem属性：

filtro: {
  orgao_origem_id: null,
  orgao_origem: null, // 新增
  orgao_destino_id: null,
},

2. 修改v-select的配置：

<v-select
    class="vselect"
    v-model="filtro.orgao_origem" <!-- 绑定对象 -->
    id="selectOrgaoOrigem"
    :options="paginated"
    <!-- 移除reduce属性 -->
    label="nome"
    placeholder="Todos"
    :filterable="false"
    @search="onSearch">
       <button :disabled="!hasPrevPage" @click.prevent="offset -= limit">
         Anterior
       </button>
       <button :disabled="!hasNextPage" @click.prevent="offset += limit">
         Próxima
       </button>
</v-select>

3. 后续需要提交ID时，直接取filtro.orgao_origem.id即可。
   这个方法更简洁，避免了手动映射的逻辑，适合不需要直接绑定ID的场景。

内容的提问来源于stack exchange，提问作者Flavio Oliveira Neto