[Vuejs]-Customize vue-multiselect options and label

1👍

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

👤Newbee

0👍

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>
👤yoduh

Leave a comment