[Vuejs]-How to pass v-avatar to chips children of multiselect v-select?

by

0👍

It’s difficult to tell if its intentional with Vuetify 3 or that it actually needs work because its so poorly documented and there are no examples out there however I get this to work by omitting the chip props on the select component and implement the chip with a slot.

<v-select
    v-model="items"
    :items="config"  
    item-title="name"
    item-value="name"                                         
    label="Select"
    multiple
    return-object            
>
    <template v-slot:selection="{ item, index, props }">               
        <v-chip closable :prepend-avatar="item.raw.img" v-bind="props" @click:close="update(index)">{{item.raw.name}}</v-chip>   
    </template>
    <template v-slot:item="{ item, props }">
        <v-list-item :prepend-avatar="item.raw.img" v-bind="props"></v-list-item>
    </template>
</v-select>

Example: https://codepen.io/alexpetergill/pen/wvEYyNw

Leave a comment