En vuetify, quiero mostrar un menú desplegable, pero para cada elemento, quiero tener una ranura para mostrar algo al lado, como un ícono, pero en el lado derecho del texto. Pero también para tenerlo de selección múltiple.
Este ejemplo no funciona, eliminó las casillas de verificación cuando agrego la ranura
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() } }) }, }, })Una solución alternativa es hacer que el elemento sea una v-checkbox y usar sus propiedades de label e append-icon adjunto:
<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> El enlace attrs hace que aparezca la casilla de verificación nativa subyacente por alguna razón, pero puede ocultarla con CSS:
.v-input--selection-controls__input > input { display: none; } Otra peculiaridad de esta solución es que hacer clic en la etiqueta no cambia la casilla de verificación, pero explícitamente (re) reenviar el evento de click parece funcionar en mis pruebas:
<v-checkbox v-on="on" @click="on.click($event)">