我在v-select中使用vue i18n翻译信息时遇到问题。所有其他翻译工作，但不是这一个。。。我找不到解决办法。。。
HTML:
<v-card-text>
<v-select v-model="model" :items="propsList" :items-text="propsList.text" label="Select a reason:" clearable />
</v-card-text>
数据，例如：($t=i18n(
propsList: [
{ text: this.$t('XXX.A') as string, value: 'X' },
{ text: this.$t('XXX.B') as string, value: 'Y' },
{ text: this.$t('XXX.C') as string, value: 'Z' },
],
传统：
{ "en": {
"XXX" : {
"A": "A", ...}},
"fr": {
"XXX" : {
"A": "A", ...}},
在我的App.vue中：
data ... :
languages: [
{ text: 'English', value: 'en' },
{ text: 'Français', value: 'fr' },
],
watch: {
language(val: string) {
this.setLanguage(val);
this.$i18n.locale = val;
},
},
我一直在努力！但提前感谢：(
有一个名为：get option label的道具对i18n很有用，这样你就可以在选项数组中传递i18n密钥：
<v-select :options="options" :get-option-label="option => $t(option.text)"></v-select>
然后选项看起来是这样的：
options = [
{ text: "XXX.A", value: 0 }
{ text: "XXX.B", value: 1 }
{ text: "XXX.C", value: 3 }
]
更多详细信息：https://vue-select.org/api/props.html#getoptionlabel
v-select没有名为"items text"(带s的items(的道具。你可能是指item-text(没有s(。
道具CCD_ 3用于指定"；路径"；在每个数据项都有文本的情况下，它默认为字符串"；文本"；这意味着该项目的文本是在属性"中找到的；文本"；
例如，如果您有以下结构的项目：
{
value: 'some value',
name: 'John'
}
你应该把字符串"；名称"；。
由于您的数据带有text属性的文本，因此您的模板应该如下所示：
<v-card-text>
<v-select v-model="model" :items="propsList" label="Select a reason:" clearable />
</v-card-text>
该道具的其他选项包括：
字符串数组
将其用于嵌套属性，例如您的项目结构如下：
{
value: 'whatever',
data: {
name: {
en: 'John'
}
}
}
您应该通过['data', 'name', 'en']，Vuetify将解析名称。
回调函数
您传递的回调函数将为每个项目调用，项目本身将作为参数传递，您应该返回想要显示的任何字符串，如果您想连接项目的两个属性，例如名字和姓氏，这可能会很有用。或者显示基于某个值的前缀
聚会可能有点晚了，但这可能会帮助最近遇到这个问题的人。TLDR答案：您可以使用插槽自定义v-select和许多其他类似v-datatable的几乎所有内容。在我们的案例中，它是item插槽。API中列出了每个组件的插槽，但有许多EXIST，但没有记录，因此您可以查看他们的论坛/github以获取社区输入。
详细答案：
<v-select
:items="cities"
v-model="city"
item-text="name"
item-value="id"
>
<template v-slot:item="{ active, item, attrs, on }">
<v-list-item v-on="on" v-bind="attrs" #default="{ active }">
<v-list-item-content>
<v-list-item-title>
<v-row no-gutters align="center" class="ml-3">
<span>{{ $t(item.name) }}</span>
</v-row>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
<template v-slot:selection="{ active, item, attrs, on }">
<div v-on="on" v-bind="attrs">
{{ $t(item.name) }}
</div>
</template>
</v-select>
那么，这段代码是如何解决问题的呢？
1( 项目文本和项目值->我们取一个具有props名称和id的对象，使用id作为返回值，并使用名称作为下拉中的显示文本
2( 在v-select标签中，我们用自定义行为定义；活动的"；作为菜单的状态；项目"-正是我们需要传递给i18n translsator或任何其他逻辑的东西；关于"；它是事件触发器；attrs"-属性是v-select对象的道具(此处发生黑魔法(
3( 我们根据需要对列表项进行样式设置，在我的情况下，名称会传递给全局应用程序范围内的翻译器函数。
4( 我们操纵选择槽不仅转换下拉菜单项，还转换所选值。在这种情况下，由于我们不需要"；活动的"；prop，我们可以使用一个普通的div并添加任何我们想要的标记。在这种情况下，我们不需要v-list项，因为它添加了侧边距，但您可以根据需要进行自定义。
您可以附加图标、注入组件等等。相当强大。