0

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

[
  {
    "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() }} 函数。非常欢迎任何帮助！

4

1 回答 1

0

解决了以下问题：

  <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',
    ...
  },

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

完成使命！;)

于 2021-05-25T00:21:47.543 回答