如何使用 JSON 文件中的字符串检索 nuxt 中的本地化字符串？答案

【问题标题】：How to retrieve localized string in nuxt using strings from a JSON file?如何使用 JSON 文件中的字符串检索 nuxt 中的本地化字符串？
【发布时间】：2021-05-24 23:45:47
【问题描述】：

我有一个包含多种语言的网站。菜单需要在某些组件中填充，因此为避免重复，我编写了一个 JSON 文件，其中包含一组 slug 和名称。

[
  {
    "slug": "articles",
    "name": "Articles"
  },
  {
    "slug": "gallery",
    "name": "Gallery"
  },
  {
    ...
  }
]

我导入 JSON 文件，并在模板内填充菜单：

  <li v-for="link in links" 
  :key="link.name">
  <NuxtLink :to="localePath('/' + 
  link.slug)">{{ link.name }}
  </NuxtLink></li>

它可以工作，但由于我的菜单必须被转换，我需要使用 link.name 值传递给 $t()，以便检索其本地化值。如果我用“{{ $t('link.name') }} 替换“{{ link.name }}”，即使我已经准备好调用本地化字符串，HTML 输出也是 link.name。我真的没有'不知道如何使用 JSON 数组中的字符串并将其传递给 {{ $t() }} 函数。非常欢迎任何帮助！

【问题讨论】：

标签： nuxt-i18n

【解决方案1】：

通过以下方式解决：

  <li v-for="link in links" :key="link.name">
    <NuxtLink :to="localePath('/' + link.slug)">
      <span>{{ $t('main.menu.' + link.slug) }}</span>
    </NuxtLink>
  </li>

$t() 函数需要一个字符串，所以它需要 ''，我的翻译被组织，菜单名称在 main.menu 对象下：

export const main = {
  title: 'a great title',
  subtitle: 'an awesome subtitle',
  ui: {
    enter: 'entra',
    ...
  },
  menu: {
    bench: 'On the bench',
    articles: 'Articoli',
    info: 'Informazioni',
    gallery: 'Galleria',
    ...
  },

幸运的是，我们可以使用简单的“+”将变量值附加到字符串中，而不需要任何特殊或神秘的函数。

任务完成！ ;)

【讨论】：