1

如何在 Nuxt 中 使用i18n-n 功能组件？Vue i18n Guide说我可以这样使用它：

<i18n-n :value="1234" :format="{ key: 'currency', currency: 'EUR' }">
  <span v-slot:currency="slotProps" styles="color: green">{{ slotProps.currency }}</span>
  <span v-slot:integer="slotProps" styles="font-weight: bold">{{ slotProps.integer }}</span>
  <span v-slot:group="slotProps" styles="font-weight: bold">{{ slotProps.group }}</span>
  <span v-slot:fraction="slotProps" styles="font-size: small">{{ slotProps.fraction }}</span>
</i18n-n>

但是带有i18n 模块的Nuxt对组件一无所知<i18n-n></i18n-n>并抛出错误

4

2 回答 2

2

解决了！

正确的代码：

<i18n-n :value="1234" :format="{ key: 'currency', currency: 'EUR' }">
  <template v-slot:currency="slotProps">
    <span styles="color: green">{{ slotProps.currency }}</span>
  </template>
  <template v-slot:integer="slotProps">
    <span styles="font-weight: bold">{{ slotProps.integer }}</span>
  </template>
  <template v-slot:group="slotProps">
    <span styles="font-weight: bold">{{ slotProps.group }}</span>
  </template>
  <template v-slot:fraction="slotProps">
    <span styles="font-size: small">{{ slotProps.fraction }}</span>
  </template>
</i18n-n>

您还需要numberFormat 正确设置

谢谢：

@kissu用于发现实际问题

@rchl工作方法

@ashkanz正确设置 numberFormats

于 2021-07-22T12:58:20.793 回答
1

这个 Github 问题解决了 OP 的问题：https ://github.com/kazupon/vue-i18n/issues/1127

它本质上是一些糟糕的文档和一些需要的配置。

于 2021-07-22T12:45:52.337 回答