Vue-i18n: tc decimal handling

Created on 13 Jun 2019  路  4Comments  路  Source: kazupon/vue-i18n

vue & vue-i18n version
vue 2.6.8
vue-i18n 8.11.2

Steps to reproduce

  {{ $tc('daysCounter', days, {count: days}) }}


  i18n: {
    messages: {
   daysCounter: ' 0 jour | {count} jour | {count} jours'
   }
}

What is Expected?
if days is 0.5 or 1.5 the singular option should be selected and output '0.5 jour' or '1.5 jour'

What is the result?
vue-i18n displays '0 jours | 0.5 jour | 0.5 jours'

Improvement

Most helpful comment

This is because $tc's second argument is supposed to be a index to choose message from case of 0 | 1 | 2 and more, so it must be int right now.

I think you may get expcted result if you round or ceil before passing days to $tc
I made an example of that: http://jsfiddle.net/5mxgauwf/1/

All 4 comments

This is because $tc's second argument is supposed to be a index to choose message from case of 0 | 1 | 2 and more, so it must be int right now.

I think you may get expcted result if you round or ceil before passing days to $tc
I made an example of that: http://jsfiddle.net/5mxgauwf/1/

I think $tc should warn if it received a non-int value (float, string, array or whatever).
Warning like $tc's second argument should be int but ... given. If you want to pass non-int number to the chosen message, consider $tc(messageKey, round(f), {count: f})
so that we can avoid confusing like this situation.

I think we can add int-ness check and warning around inside the below
https://github.com/kazupon/vue-i18n/blob/6ffc60190d4d7910964186fd3904b77fd422a399/src/index.js#L517-L525

I have same issue about decimals and I think it could be a good idea to let this situation documented.

Same issue here.

Was this page helpful?
0 / 5 - 0 ratings