I used this template to display a list of selected items from my database. https://vuetifyjs.com/en/components/selects/#append-and-prepend-item
<v-list-item
two-line
inactive
:ripple="false"
dense
style="margin-top: 15px"
>
<v-autocomplete
v-model="valuesConnection"
:items="connectionArray"
label="Relationship"
:search-input.sync="searchConnection"
class="settingsLstItm"
filled
dark
append-icon="mdi-chevron-down"
clear-icon="mdi-close-circle"
:background-color="backgroundDark3"
dense
clearable
multiple
:item-color="yellow"
item-text="color:var(--yellow)"
loading="true"
:menu-props="{ dark: true, maxWidth: 280 }"
>
<template v-slot:prepend-item>
<v-list-item
ripple
@mousedown.prevent
@click="toggle"
>
<v-list-item-action>
<v-icon :color="valuesConnection.length > 0 ? 'var(--yellow)' : ''">
{{ icon }}
</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
SELECT ALL
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider class="mt-2"></v-divider>
</template>
</v-autocomplete>
</v-list-item>
But I'd like to choose how they are displayed in the span below. For example, when I'm chosing to select them all, I don't want them all to appear on the span, but only the first one and them {{the rest}} others.
Actually, it would be a mix of 2 templates but I don't know how to get them to work together. The templates v-slot:selection="{ item, index } and v-slot:prepend-item would make a perfect combination of the result I want.
I think this should do that, simply adding the template for #selection
under the earlier template.
<v-list-item
two-line
inactive
:ripple="false"
dense
style="margin-top: 15px"
>
<v-autocomplete
v-model="valuesConnection"
:items="connectionArray"
label="Relationship"
:search-input.sync="searchConnection"
class="settingsLstItm"
filled
dark
append-icon="mdi-chevron-down"
clear-icon="mdi-close-circle"
:background-color="backgroundDark3"
dense
clearable
multiple
:item-color="yellow"
item-text="color:var(--yellow)"
loading="true"
:menu-props="{ dark: true, maxWidth: 280 }"
>
<template v-slot:prepend-item>
<v-list-item
ripple
@mousedown.prevent
@click="toggle"
>
<v-list-item-action>
<v-icon :color="valuesConnection.length > 0 ? 'var(--yellow)' : ''">
{{ icon }}
</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
SELECT ALL
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider class="mt-2"></v-divider>
</template>
<template v-slot:selection="{ item, index }">
<v-chip v-if="index === 0">
<span>{{ item }}</span>
</v-chip>
<span
v-if="index === 1"
class="grey--text text-caption"
>
+{{ value.length - 1 }} others
</span>
</template>
</v-autocomplete>
</v-list-item>
You can usually add however many templates you want inside the component.