In my project, I have a grid containing v-autocomplete components with the multiple attribute. To maintain clean formatting, I decided to show only a shortened version of the content using the selection slot feature provided below:
<v-autocomplete
v-model="programModel"
multiple
density="compact"
variant="outlined"
hide-details
color="primary"
flat
rounded
label="Programs"
:items="programData"
item-title="program_name"
return-object
:rules="arrayRequiredRule"
:readonly="!editableTopSectionModel"
>
<template v-slot:selection="{ item, index }">
<span v-if="!index">{{ item.title }}</span>
<span class="grey--text caption" v-else-if="index === 1">
(+ {{programModel!.length - 1}} others)
</span>
</template>
</v-autocomplete>
One challenge I encountered is that I included a button in the form to toggle the editability of the v-autocompletes by changing the readonly attribute. However, when the component is set to readonly, users are unable to access the dropdown menu to view available options. I am currently exploring solutions to address this functionality issue.