Customize vue-multiselect options and label

Question

By default, when we use vue-multiselect, the provided options only appear as it is in the selected labels. I want to customize this.

Support, I have this as the data,

options: [
  { code: 1002, text: 'A' },
  { code: 2001, text: 'B' },
  { code: 1, text: 'C' }
]

I want to display both the code and the text while showing the options in the dropdown menu, but once selected, I want to only show the code in the selected options. How can I achieve this?

Answer 1

There are slots for this kind of customization. You can use the singleLabel slot to customize the selected option, and the option slot to customize each dropdown option

<multiselect v-model="value" :options="options">
  <template #singleLabel="{ option }">
    <div>{{ option.code }}</div>
  </template>
  <template #option="{ option }">
    <div>{{ option.code }} - {{ option.text }}</div>
  </template>
</multiselect>

Answer 2

I think your are looking for something like this.

<v-select
  :items="options"
  :item-title="(item)=>`${item.code} = ${item.text}`"
  :item-value="(item)=>`${item.code}`"
  label="Select"
  multiple
>
  <template v-slot:selection="{ item }">
    {{ item.value }}
  </template>
</v-select>

Demo