Component Interpolation doesn't work with lists

[Reinier Kaper]

Reporting a bug?

When using YAML lists with tm and rt, you can't look up values with te in the process.

Here's an example:

<template>
  <div v-for="item in tm('items')">
    <p v-if="te(item.hasHTML)>{{ rt(item.name) }}</p>
  </div>
</template>

<i18n lang="yaml">
en:
  items:
    - name: 'foo'
      hasHTML: true
</i18n>

Expected behavior

To be able to still look up if a key exists inside of lists

Reproduction

If you create a template with the nuxt plugin, I'm more than willing to create a repro.

System Info

System:
    OS: macOS 14.2.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 173.25 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.7.0 - ~/.nvm/versions/node/v20.7.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.7.0/bin/npm
  Browsers:
    Chrome: 120.0.6099.199
    Edge: 120.0.2210.121
    Safari: 17.2.1
  npmPackages:
    @vue/eslint-config-prettier: ^8.0.0 => 8.0.0
    vite-svg-loader: ^5.1.0 => 5.1.0
    vue: ^3.3.8 => 3.4.3
    vue-bind-once: ^0.2.1 => 0.2.1
    vue-imask: ^7.3.0 => 7.3.0
    vue-observe-visibility: ^1.0.0 => 1.0.0
    vue-router: ^4.2.5 => 4.2.5
    vue-slider-component: ^4.1.0-beta.7 => 4.1.0-beta.7
    vue-tel-input: ^8.3.1 => 8.3.1

Screenshot

No response

Additional context

I have to say all these breaking API changes are very hard to work with. Instead of being able to just have a string with some HTML in it, we're forced to use an i18n-t component, but we can't even dynamically check if we need that component.

Validations

• Read the Contributing Guidelines
• Read the Documentation
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussions

[Reinier Kaper]

Guess it works if you just use item.hasHTML, still I think that te would be more appropriate and consistent.

[kazuya kawaguchi]

Thank you for four feedback!
Sorry late my reply.

te will checks for the presence of a message by key for resources that vue-i18n has internally.

For complex resources that use tm and rt, te does not support that use case. You need to add an API like rte (resolve translation exists) like tm and rt.