Vuetify: Use v-chip-group inside a v-select selection slot

Viewed 803

I am trying to add a v-chip-group in a v-select v-slot=selection but am failing.

Due to design requirements, I have to persist some placeholder text in a multi-select but only have so much width for the component. I want the chips to overflow to the right with a scroll interface like the default v-chip-group but can't seem to work it together.

Goal v-chip-group

Current BaseSelect result

How can I get the proxy BaseSelect component, which is basically a wrapper for default styling of a v-select, to work as v-chip-group? I also want the chips to work with the deletable-chips prop.

Component

            <BaseSelect
              multiple
              class="flex-0-1-30rem"
              localKey="breakdownBy"
              :items="localizedBreakdownList"
              :value="breakdowns"
              :placeholder="$t('select-breakdownBy-label')"
              @change="setBreakdowns"
            >
              <template v-slot:selection="{ item, select, index }">
                <span
                  v-if="index === 0"
                  class="text--uppercase"
                >{{ $t('select-breakdownBy-label') }}</span>
                <v-chip color="primary" class="text--white">{{ item.text }}</v-chip>
              </template>
            </BaseSelect>

BaseSelect component

<template>
  <v-select
    hide-details
    solo
    dense
    :append-icon="mdiMenuDown"
    :items="items"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <!-- Passes scopedSlots to child -->
    <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
      <slot :name="slot" v-bind="scope" />
    </template>

    <!-- Default scopedSlots -->
    <template v-if="!hasScopedSlot('selection')" v-slot:selection="{ item }">
      <span
        :class="slotClasses"
      >{{ item.text || $t(`select-${localKey}-option-${item.value || item}`) || item }}</span>
    </template>

    <template v-if="!hasScopedSlot('item')" v-slot:item="{ item }">
      <span
        :class="slotClasses"
      >{{ item.text || $t(`select-${localKey}-option-${item.value || item}`) || item }}</span>
    </template>
  </v-select>
</template>
0 Answers
Related