In vuetify I want to show a dropdown but for each item, I want to have a slot to show something beside it like an icon but on the right side of the text. But also to have it multiple select.
This example does not work, it removed the checkboxes when I add the slot
https://codepen.io/Sneaky6666/pen/KKyqNaB?editors=101
<div id="app">
<v-app id="inspire">
<v-autocomplete
v-model="selectedFruits"
:items="fruits"
label="Favorite Fruits"
multiple
>
<template v-slot:item="{item}">
{{item}}
</template>
</v-autocomplete>
</v-container>
</v-app>
</div>
js
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
fruits: [
'Apples',
'Apricots',
'Avocado',
'Bananas',
'Blueberries',
'Blackberries',
'Boysenberries',
'Bread fruit',
'Cantaloupes (cantalope)',
'Cherries',
'Cranberries',
'Cucumbers',
'Currants',
'Dates',
'Eggplant',
'Figs',
'Grapes',
'Grapefruit',
'Guava',
'Honeydew melons',
'Huckleberries',
'Kiwis',
'Kumquat',
'Lemons',
'Limes',
'Mangos',
'Mulberries',
'Muskmelon',
'Nectarines',
'Olives',
'Oranges',
'Papaya',
'Peaches',
'Pears',
'Persimmon',
'Pineapple',
'Plums',
'Pomegranate',
'Raspberries',
'Rose Apple',
'Starfruit',
'Strawberries',
'Tangerines',
'Tomatoes',
'Watermelons',
'Zucchini',
],
selectedFruits: [],
}),
computed: {
likesAllFruit () {
return this.selectedFruits.length === this.fruits.length
},
likesSomeFruit () {
return this.selectedFruits.length > 0 && !this.likesAllFruit
},
icon () {
if (this.likesAllFruit) return 'mdi-close-box'
if (this.likesSomeFruit) return 'mdi-minus-box'
return 'mdi-checkbox-blank-outline'
},
},
methods: {
toggle () {
this.$nextTick(() => {
if (this.likesAllFruit) {
this.selectedFruits = []
} else {
this.selectedFruits = this.fruits.slice()
}
})
},
},
})
A workaround is to make the item a v-checkbox, and use its label and append-icon properties:
<v-autocomplete
v-model="selectedFruits"
:items="fruits"
label="Favorite Fruits"
multiple
>
<template v-slot:item="{ on, attrs, item }">
<v-checkbox v-on="on" v-bind="attrs" append-icon="people" :label="item"></v-checkbox>
</template>
</v-autocomplete>
The attrs binding causes the underlying native checkbox to appear for some reason, but you can hide that with CSS:
.v-input--selection-controls__input > input {
display: none;
}
Another quirk to this solution is that clicking the label does not toggle the checkbox, but explicitly (re)-forwarding the click event seems to work in my tests:
<v-checkbox v-on="on" @click="on.click($event)">