使用自定义模板单击选项时，Vuetify v-select 不会触发选择事件

Question

我正在使用 Vuetify 测试版 (v3.0.0-beta.6)，因为我必须使用 Vue 3 并且它不支持 Vuetify 2.x。

我想创建一个带有国旗图标的 i18n 选择器。

为了管理 i18n，我使用了 vue-i18n 库。

正如vue-i18n 中提到的，创建这个选择器（https://vue-i18n.intlify.dev/guide/essentials/scope.html#locale-changing）非常简单。

所以我正在做的是使用 Vuetify <v-select> 组件来添加我的自定义。

问题是组件看起来像我想要的那样，但是选择行为中断了。

那里有我的代码：

<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>

注意：我需要在项目插槽中使用<v-list-item>，因为如果我删除它，所有项目都将显示在同一行，作为唯一选项。

知道我做错了什么吗？

Answer 1

尝试将 v-bind 和 v-on 添加到您的 v-list-item

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