Templating

The selectable options (items) on the Select UI can be customized using the item slot and the itemHeight options.

The item data is accessible through the slot parameter data property.

<template #item="args">
  <div>{{ args.data.text}}</div>
  <div>{{ args.data.value}}</div>
  <div>{{ args.data.yourCustomProperty}}</div>
</template>

Example for adding images to items

<script setup>
  const countries = [{
        value: 'US',
        text: 'United States of America',
        flagUrl: '//urlto/usa-flag',
    }, {
        value: 'DE',
        text: 'Germany',
        flagUrl: '//urlto/german-flag',
    }, {
        value: 'FR',
        text: 'France',
        flagUrl: '//urlto/french-flag',
    }];
</script>

<template>
  <MbscSelect :data="countries">
    <template #item="i">
      <div class="my-country-container">
        <img :src="i.data.flagUrl" />
        {{data.text}}
      </div>;
    </template>
  </MbscSelect>
</template>

info

Every item on the Select must have the same height. For styles that go beyond the default height, the itemHeight option can be used to adjust the styling.