Vue：从API获取翻译

j5fpnvbx 于 2023-08-07 发布在 Vue.js

关注(0)|答案(1)|浏览(124)

我使用vue和I18n进行翻译。在硬编码的翻译中，所有工作都很好：

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

字符串
然后从json文件中获取模板中的值：

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

型
const locale等于lang用户选择：'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>

型
问：我不太明白如何foreach name.en，name.frname.nl和显示name.fr如果我的locale == 'fr'等。我只知道：

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

型
等等。也许还有更有效的方法？

vue.js

来源：https://stackoverflow.com/questions/76651355/vue-get-translations-from-api

1条答案

按热度按时间

knpiaxh11#

记住你输入的只是js。你可以把语言放在数据对象的变量上，然后用途：

data: {
  "lang": "en"
}

个字符
你也可以重新构造你的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"
    }
  }
}

型
然后在模板中使用：

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

型
这样，模板中的变量名变得更具描述性。你也可以在改变语言的时候，把整个对象作为一种语言，直接放在数据上，这样你就不必再通过translations[lang]引用它了。

赞(0）回复(0）举报 2023-08-07

我来回答

Vue：从API获取翻译

1条答案

相关问题

热门标签

最新问答