CODEWITHSUNDEEP
vue.jsvuetify.js
arhakim
arhakim

Reputation: 174

Vuetifyjs v-automplete multiple. Show total number of selected items only

I am using Vuetifyjs/v-autocomplete component with "multiple" props enabled. By default, the component display all selected items on the input. Is it possible to modify the display of the selected items to display the total number of the selected items only? e.g: I want to have the component to show such as "3 items selected"

Any help will be appreciated.

Upvotes: 1

Views: 2008

Answers (1)

cmfc31
cmfc31

Reputation: 1508

Check this codesandbox I made: https://codesandbox.io/s/stack-73550753-autocomplete-custom-selection-co5wbh?file=/src/components/Example.vue

You can do that modifying the selection slot of the autocomplete like this, in this example I've specified that if just one element is selected it will show the normal chip label, if there's more than one the message X items selected will appear:

<v-autocomplete
    v-model="selected"
    :items="items"
    outlined
    dense
    chips
    small-chips
    label="Autocomplete"
    multiple
>
    <template v-slot:selection="data">
        <v-chip
            v-if="selected.length < 2"
            v-bind="data.attrs"
            small
        >
            {{ data.item }}
        </v-chip>
        <div v-else-if="data.index === 0">
            {{ `${selected.length} items selected` }}
        </div>
    </template>
</v-autocomplete>

Vuetify components have sections that you can customize called slots. You can find what slots you have available by looking at the API documentation of an specific componente. https://vuetifyjs.com/en/api/v-autocomplete/#slots

enter image description here

Upvotes: 3

Related Questions