Vue i18n 中的复数处理

Question

你好，我正在尝试根据https://kazupon.github.io/vue-i18n/guide/pluralization.html进行复数化。

imageCount== 1
          ? $t("message.imageMessage", 1, { imageCount})
          : $t("message.imageMessage", imageCount, {
              imageCount
            })



imageMessage: '{imageCount} image downloaded | {imageCount} images downloaded'

问题：目前它显示了两个信息，这不应该发生，我实现的方式有什么问题吗？

Codesandbox: https://codesandbox.io/s/lingering-haze-z9jzt?file=/src/components/HelloWorld.vue

代码沙盒：https://codesandbox.io/s/lingering-haze-z9jzt?file=/src/components/HelloWorld.vue

- user11982170

---

从您提供的文档中可以看到：“您的模板将需要使用 $tc() 代替 $t()”。示例 - https://codesandbox.io/s/recursing-neumann-e2gdn?file=/src/components/HelloWorld.vue - Phil

哦，刚刚错过了这个点，谢谢。 - user11982170

Answer 1

来自文档...

你的模板将需要使用$tc()而不是$t()。

---

你也可以通过在翻译字符串中使用{n}或{count}来改进/缩短代码...

en: {
  message: {
    imageMessage: "{n} image downloaded | {n} images downloaded"
  }
}

在您的模板中

$tc("message.imageMessage", imageCount)

- Phil

Answer 2

使用vue@3、vue-i18n@9和Composition API，其中locale键为：

{
  message: {
    imageMessage: "no images | 1 image downloaded | {n} images downloaded"
  }
}

只需要做以下操作：

$t('message.imageMessage', { n: images.length })
// OR 
$t('message.imageMessage', images.length)

- infinity