问题

我使用Vue和I18n进行翻译。在硬编码的翻译中一切都正常：

import { useI18n } from 'vue-i18n'
const { locale, t } = useI18n({ useScope: 'global' })

从JSON文件中获取模板中的值：

<div>{{ t('headers.settings') }}</div>

locale变量等于用户选择的语言：'en'、'fr'等。

对于动态数据，我从API端点获取数据。数据结构如下：

data: {
  "key": "Configuration",
  "name": {
    "en": "configuration",
    "nl": "configuratie",
    "fr": "configuration"
  },
  "description": {
    "en": "this is the configuration",
    "nl": "dit is de configuratie",
    "fr": "c'est la configuration"
  }
}

所以要获取英语的名称：

<div>{{ data.name.en }}</div>

问题：我不太明白如何循环遍历name.en、name.fr、name.nl并根据我的locale == 'fr'等条件显示name.fr等。我唯一想到的方法是：

<div v-if="locale == 'fr'">{{ data.name.fr }}</div>
<div v-if="locale == 'en'">{{ data.name.en }}</div>

依此类推。也许有更有效的方法吗？

import { useI18n } from 'vue-i18n'
const { locale, t } = useI18n({ useScope: 'global' })

 <div >{{ t('headers.settings') }}</div>

 data: {
  "key": "Configuration",
  "name": {
   "en": "configuration",
   "nl": "configuratie",
   "fr": "configuration"
 },
  "description": {
   "en": "this is the configuration",
   "nl": "dit is de configuratie",
   "fr": "c'est la configuration"
 },

<div> {{ data.name.en }} </div>

    <div v-if="locale == 'fr' "> {{ data.name.fr }} </div>
    <div v-if="locale == 'en' "> {{ data.name.en }} </div>  

答案1

得分: 1

请注意，以下是翻译好的部分：

"remember what you type in there is simply js. you could put the language on a variable on your data object and then use:"
"请记住，在这里输入的只是JavaScript代码。您可以将语言存储在数据对象的变量中，然后使用："

  "lang": "en"
}```
```数据: {
  "lang": "en"
}```

```<div> {{ data.name[lang] }} </div>```
```<div> {{ data.name[lang] }} </div>```

"you could also re-structure your JSON response to look like this:"
"您还可以重新组织JSON响应，使其如下所示："

```data: {
  "lang": "en",
  "translations": {
    "en": {
      "configuration": "configuration",
      "description": "this is the configuration"
    },
    "fr": {
      "configuration": "configuration",
      "description": "c'est la configuration"
    },
    "nl": {
      "configuration": "configuratie",
      "description": "dit is de configuratie"
    }
  }
}```
```数据: {
  "lang": "en",
  "translations": {
    "en": {
      "configuration": "configuration",
      "description": "this is the configuration"
    },
    "fr": {
      "configuration": "configuration",
      "description": "c'est la configuration"
    },
    "nl": {
      "configuration": "configuratie",
      "description": "dit is de configuratie"
    }
  }
}```

"then you use in your template:"
"然后在您的模板中使用："

```<div> {{ translations[lang].configuration }}</div>```
```<div> {{ translations[lang].configuration }}</div>```

"this way the variable name in the template becomes more descriptive. you could also on change of language, take the whole object for a language and put it on data directly, so you do not have to refer to it via `translations[lang]` anymore."
"这样，模板中的变量名称变得更加描述性。您还可以在更改语言时，将整个语言对象直接放入数据中，这样您就不再需要通过`translations[lang]`来引用它。"

<details>
<summary>英文:</summary>

remember what you type in there is simply js. you could put the language on a variable on your data object and then use:

data: {
"lang": "en"
}

<div> {{ data.name[lang] }} </div>

you could also re-structure your JSON response to look like this:

     data: {
      "lang": "en",
      "translations": {
        "en": {
          "configuration": "configuration",
          "description": "this is the configuration"
        },
        "fr": {
          "configuration": "configuration",
          "description": "c'est la configuration"
        },
        "nl": {
          "configuration": "configuratie",
          "description": "dit is de configuratie"
        }
      }
    }

then you use in you template:

<div> {{ translations[lang].configuration }}</div>

this way the variable name in the template becomes more descriptive. you could also on change of language, take the whole object for a language and put it on data directly, so you do not have to refer to it via `translations[lang]` anymore.

</details>