0
619
ViewsVuetify Autocomplete Menu / Dropdown in chips style
I want to change the Style of the Items in the drodpown Menu of my Autocomplete Box. Vuetify-Autocomplete
Currently it shows the standard Style for each Item: Current
<v-autocomplete
chips
deletable-chips
multiple
v-model="selectedTags"
:items="tags"
></v-autocomplete>
But I want it to show chips Items-Style like this:
If possible even with specific colors for each Tag. I am currently displaying them in a Table with the normal "v-chip" component which works great! Table with colored chips
I tried to tinker a little bit with CSS and with the V-autocomplete Component which resulted in Errors each Time.
I tried to find something like
:menu-props="{
nudgeBottom: 15 + 'px',
zIndex: 2,
allowOverflow,
rounded: 'xl' // <-- Here ✅
}"
shown in this Issue StackoverflowIssue. But for the Props/Items inside the Menu instead for the Menu.
The other solution would be to do a do-it myself Version which doesn't use the dropdown and I simply check if the string is contained in one of the Chips in my Chip-List and display them beneath the Searchbar. But then I would need to reject some cool features of autocomplete.
I can't append Pictures yet, because I am too new. Sorry for that!
I hope I included all Infos.
1 answers
Answer question0
Check this codesandbox I made: https://codesandbox.io/s/stack-70189718-eqwgl?file=/src/components/AutoChips.vue
Some vuetify components have a thing called slots, that you can customize to your needs, in case of v-autocomplete has an item slot, to customize the items of the displayed list. All you need to do is create a custom template for an item of the list.
<v-autocomplete
v-model="values"
:items="items"
chips
deletable-chips
multiple
label="Autocomplete custom items"
>
<template v-slot:item="{ item, on, attrs }">
<v-list-item v-on="on" v-bind="attrs" #default="{ active }">
<v-list-item-action>
<v-checkbox :color="getChipColor(item)" :input-value="active"></v-checkbox>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
<v-chip dark :color="getChipColor(item)"> {{ item }} </v-chip>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
</v-autocomplete>
You can set a custom color for each v-chip by creating a simple method and passing the item value.
getChipColor(item) {
switch (item) {
case 'foo':
return 'red darken-2'
case 'bar':
return 'green darken-2'
case 'fizz':
return 'orange darken-2'
case 'buzz':
return 'purple darken-2'
default:
return 'grey lighten-2'
}
}
If you would like to customize the selected chips as well, you can do it by simply modifying the selection slot. You can check all the available slots of the v-autocomplete on it's API documentation page. https://vuetifyjs.com/en/api/v-autocomplete/#slots
