Vuetify v-select not trigger select event on option click with custom template

Question

I am using Vuetify beta version (v3.0.0-beta.6) because I have to use Vue 3 and Vuetify 2.x is not supported by it.

I want to create an i18n selector with the country flag icon.

To manage i18n I use the vue-i18n library.

As mentioned in vue-i18n it is very simple to create this selector (https://vue-i18n.intlify.dev/guide/essentials/scope.html#locale-changing).

So what I'm doing is using the Vuetify <v-select> component to add my customization.

The problem is that the component looks the way I want it, but the selection behavior breaks.

There my code:

<template>
    <v-select class="language-select" v-model="$i18n.locale" :items="$i18n.availableLocales" @change="setLocale($event)"
        hide-selected variant="plain">
        <template v-slot:selection="{ item }">
            <v-icon> {{ getFlag(item) }} </v-icon>
        </template>
        <template v-slot:item="{ item }">
            <v-list-item :key="`locale-${item.value}`" :value="item.value" :prepend-icon="getFlag(item)"
                :title="getItemCaption(item)">
            </v-list-item>
        </template>
    </v-select>

</template>

<script setup lang="ts">
import { useLocaleStore } from "@/stores/locale"
import selectCaption from "@/i18n/language-select-caption.json"

function setLocale(event: Event) {
    useLocaleStore().setLocale((<HTMLInputElement>event.target).value);
}

function getFlag(locale: any) {
    const xx = locale.value === 'en' ? "gb" : locale.value;
    return "fi fis rounded-icon fi-" + xx;
}

function getItemCaption(locale: any) {
    return selectCaption[locale.value];
}

</script>

<style lang="scss">
.language-select {
    max-width: 60px;
    margin-top: 35px;
}

.rounded-icon {
    border-radius: 50%;
    font-size: 24px;
}
</style>

NOTE: I need to use <v-list-item> in the item slot becasuse if I remove it all items are showed on the same line, as unique option.

Any idea on what i'm doing wrong?

Answer 1

Try adding adding v-bind to your v-list-item

<template v-slot:item="data">
    <v-list-item 
        v-bind="data.props" 
        :key="`locale-${data.item.value}`" 
        :value="data.item.value"         
        :prepend-icon="getFlag(data.item)"
        :title="getItemCaption(data.item)">
    </v-list-item>
</template>

(edited for vuetify 3, per Jerod's comment below)