Is there any v-select prop I can use to fix this?

Question

At first, everything works fine until I search my option and clicking it.

This is my v-select code:

`<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/>`

This is my js code:

    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)
      },
    },

When I select an option without searching and when I select by using the pagination buttons, it works fine. But when I use the search bar to find an option and I select it, the label show me the ID.

The paginated, filtered and search codes are equal to the pagination v-select doc. And the options I use at v-select is an Object with ID and name.

Is there something i missed?

Expected behavior:

It should show me the 'nome (name, translate)' at the label, as it shows me when I don't use the search function.

Answer 1

You could try to change:

:reduce="nome => nome.id"

to

:reduce="nome => nome"

And:

filtro: {
    orgao_origem_id: null,
    orgao_destino_id: null,
},

to

filtro: {
  orgao_origem: null,  // Changed from orgao_origem_id
  orgao_destino_id: null,
},