Vue-i18n 和 v-select - 无法翻译答案

【问题标题】：Vue-i18n and v-select - can't translateVue-i18n 和 v-select - 无法翻译
【发布时间】：2021-07-12 15:54:06
【问题描述】：

我在 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;
    },
},

我一直在努力！但是在此先感谢:)

【问题讨论】：

标签： vue.js vuetify.js vue-i18n

【解决方案1】：

v-select 没有名为“items-text”的道具（带有 s 的项目）。您可能是指item-text（不带 s）。

prop item-text 用于指定每个数据项具有文本的“路径”，它默认为字符串“text”，这意味着该项目的文本在属性“text”中找到

例如，如果您拥有具有以下结构的项目：

{
  value: 'some value',
  name: 'John'
}

你应该传递字符串“name”。

由于您的数据的文本为 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 会解析名称。

回调函数

将为每个项目调用您传递的回调函数，并且项目本身将作为参数传递，您应该返回要显示的任何字符串，如果您想连接项目的两个属性，这可能很有用，例如名字和姓氏。或根据某个值显示前缀

【讨论】：