4

Hi i am trying to pluralize based on 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'

Problem : currently it is displaying bo the messages which should not happen,is there anything wrong in the way which i have implemented?

enter image description here

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

  • 2
    From the documentation you linked ~ _"Your template will need to use **`$tc()`** instead of `$t()`"_. Demo ~ https://codesandbox.io/s/recursing-neumann-e2gdn?file=/src/components/HelloWorld.vue – Phil Apr 30 '20 at 05:46
  • ohh just missed this point,thanks –  Apr 30 '20 at 05:57

2 Answers2

8

From the documentation...

Your template will need to use $tc() instead of $t().

You can also improve / shorten your code somewhat by using {n} or {count} in your translation strings...

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

and in your templates

$tc("message.imageMessage", imageCount)
Phil
  • 157,677
  • 23
  • 242
  • 245
2

With vue@3 and vue-i18n@9 and Composition API, with locale key being:

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

It's enough to do:

$t('message.imageMessage', { n: images.length })
// OR 
$t('message.imageMessage', images.length)
infinity
  • 530
  • 5
  • 6