intlify / vue-i18n

Vue I18n for Vue 3
https://vue-i18n.intlify.dev/
MIT License
2.21k stars 337 forks source link

Named Interpolation with Pluralization Produces Incorrect Output #2032

Closed alizadeh118 closed 6 days ago

alizadeh118 commented 6 days ago

Reporting a bug?

Named interpolation is not working with pluralization as expected. The official example demonstrates using named interpolation for n with the value too many. However, using the exact code in a minimal reproduction produces a different output, which does not include the interpolated value (too many).

Expected behavior

The n parameter is expected to be replaced with the interpolated value (e.g., too many in this example).

Reproduction

https://stackblitz.com/edit/vitejs-vite-dpxmpk?file=src%2FApp.vue

System Info

System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M1
    Memory: 57.31 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - /usr/local/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.5.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 131.0.6778.86
    Firefox: 131.0.3
    Safari: 17.0
  npmPackages:
    @vue/compat: ^3.5.13 => 3.5.13 
    vue: ^3.5.13 => 3.5.13 
    vue-chartjs: ^5.2.0 => 5.2.0 
    vue-directive-tooltip: ^1.4.0 => 1.6.3 
    vue-draggable-plus: ^0.2.6 => 0.2.6 
    vue-i18n: ^10.0.4 => 10.0.4 
    vue-loader: ^17.4.2 => 17.4.2 
    vue-persian-datetime-picker: ^2.10.3 => 2.10.4 
    vue-round-filter: ^1.1.2 => 1.1.2 
    vue-router: ^4.4.5 => 4.5.0 
    vue-screen: ^2.4.0 => 2.4.0 
    vue-select: ^3.1.0 => 3.18.3 
    vue-server-renderer: 2.4.4 => 2.4.4 
    vue-spinner: ^1.0.2 => 1.0.4 
    vue-strap: github:wffranco/vue-strap => 2.0.2 
    vue2-highcharts: ^1.2.5 => 1.2.5 
    vue3-click-away: ^1.2.4 => 1.2.4 
    vuedraggable: ^2.16.0 => 2.24.3

Screenshot

No response

Additional context

No response

Validations

kazupon commented 6 days ago

Thank you for your reporting!

sorry, docs is wrong. you need to use via named options, the below:

<p>{{ $t('banana', 100, { named: { n: 'too many' } }) }}</p>

thanks!