javascript Nuxt 3和@nuxtjs/i18 n不再能够使用v-for迭代翻译了吗？

0lvr5msh 于 2022-12-21 发布在 Java

关注(0)|答案(2)|浏览(355)

假设翻译文件中有一个Array
en.js

section: {
   title: 'This value is a string and it works just fine',
   highlighted: [
      {
         title: 'Highlighted title 1',
         text: 'Highlighted text 1'
      },
      {
         title: 'Highlighted title 2',
         text: 'Highlighted text 2'
      }
   ]
}

使用Nuxt版本2和nuxt-i18n可以执行以下操作：

<h2>{{ $t('section.title') }}</h2>
<template v-for="(item, index) in $t('section.highlighted')" :key="item.title">
    {{ item.title }} 
    {{ item.text }}
</template>

但是自从我升级到Nuxt v3和@nuxtjs/i18n之后，数组$t('section.highlighted')输出密钥

s
e
c
t
i
o
n
.
h
i
g
h
l
i
g
h
t
e
d

这是我在nuxt.config.js中的插件设置

modules: [
  '@nuxtjs/i18n',
],
i18n: {
  locales: ['en', 'de'],
  defaultLocale: 'en',
  vueI18n: {
    legacy: false,
    fallbackLocale: 'en',
    messages: {
      en,
      de
    }
  }
},

我遗漏了什么？我在迁移指南https://i18n.nuxtjs.org/migrating中找不到任何相关信息

JavaScript

来源：https://stackoverflow.com/questions/74853344/nuxt-3-and-nuxtjs-i18n-isnt-posible-to-iterate-over-translations-using-v-for-a

2条答案

按热度按时间

ht4b089n1#

你试图以错误的方式使用这个工具。I18n工具只是按键获得一些翻译字符串，而不是存储像数组这样的某种数据。
您可以这样安排：
第一个月

section: {
   title: 'My title',
   highlighted: {
      // '1' - just key
      '1': {
         title: 'Highlighted title 1',
         text: 'Highlighted text 1'
      },
      '2': {
         title: 'Highlighted title 2',
         text: 'Highlighted text 2'
      }
   ]
}

component.vue

<template>
  <div> {{ $t('section.highlighted.1.title') }} </div>
</template>

如果你有固定的k元素要翻译，这可能是一个好主意（对于着陆页的块结束的功能列表等）。
但是如果您想在这里显示大数据，您应该查看一个数据库，并将数据存储在那里或客户端的JSON文件中，然后根据您的区域设置（this.$i18n.locale）手动获取它们。

赞(0）回复(0）举报 2022-12-21

oxcyiej72#

您完全可以在翻译文件中迭代数组，vue-i18 n有特定的方法来实现这一点。
https://vue-i18n.intlify.dev/api/composition.html#composer
由于nuxt/i18 n for nuxt 3使用的是这个版本的vue i18 n，您可以直接使用它们，如下所示：

<p
  v-for="paragraph in $tm('some.array')"
  :key="paragraph"
>
  {{ $rt(paragraph) }}
</p>

赞(0）回复(0）举报 2022-12-21

我来回答

javascript Nuxt 3和@nuxtjs/i18 n不再能够使用v-for迭代翻译了吗？

2条答案

相关问题

热门标签

最新问答