Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translation Component only render deepest HTML element #1122

Closed
5 tasks done
cuongvuong-phoenix opened this issue Aug 13, 2022 · 0 comments · Fixed by #1177
Closed
5 tasks done

Translation Component only render deepest HTML element #1122

cuongvuong-phoenix opened this issue Aug 13, 2022 · 0 comments · Fixed by #1177
Labels
help wanted Extra attention is needed Status: PR Welcome Welcome to Pull Request Type: Bug Bug or Bug fixes

Comments

@cuongvuong-phoenix
Copy link

cuongvuong-phoenix commented Aug 13, 2022

Reporting a bug?

Since the #820 PR in version v9.2.0-beta.23 (2021-12-04), the Translation Component only render the deepest HTML element of each child.
This happens only when the component interpolation follows list interpolation.

Expected behavior

Should treat each child in the list like a named slot.

Reproduction

Message:

greeting: "{0},{1} is an internationalization plugin for Vue.js"

Vue SFC:

<template>
  <i18n-t keypath="greeting">
    <span class="text-gray-500">Hello</span>
    <a
      rel="noreferrer"
      href="https://github.com/intlify/vue-i18n-next"
      target="_blank"
      class="hover:text-amber-600"
    >
      <strong>Vue I18n</strong>
      This is not rendered
    </a>
  </i18n-t>
</template>

Output HTML:

<span class="text-gray-500">Hello</span>
", "
<strong>Vue I18n</strong>
" is an internationalization plugin for Vue.js"

System Info

System:
    OS: Linux 5.18 undefined
    CPU: (12) x64 AMD Ryzen 5 5600G with Radeon Graphics
    Memory: 15.75 GB / 27.29 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.asdf/installs/nodejs/lts/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.11.0 - ~/.asdf/plugins/nodejs/shims/npm
    Watchman: 20220807.195202.0 - /usr/bin/watchman
  Browsers:
    Brave Browser: 104.1.42.88
    Chromium: 104.0.5112.79
    Firefox: 103.0.2
  npmPackages:
    @intlify/vite-plugin-vue-i18n: ^6.0.1 => 6.0.1
    @vitejs/plugin-vue: ^3.0.3 => 3.0.3
    vite: ^3.0.7 => 3.0.7
    vite-plugin-vue-markdown: ^0.21.1 => 0.21.1
    vue: ^3.2.37 => 3.2.37
    vue-i18n: 9.2.0-beta.23 => 9.2.0-beta.23
    vue-router: ^4 => 4.0.12
    vue-tsc: ^0.40.1 => 0.40.1

Screenshot

No response

Additional context

No response

Validations

@cuongvuong-phoenix cuongvuong-phoenix added the Status: Review Needed Request for review comments label Aug 13, 2022
@kazupon kazupon added Type: Bug Bug or Bug fixes help wanted Extra attention is needed Status: PR Welcome Welcome to Pull Request and removed Status: Review Needed Request for review comments labels Aug 16, 2022
littleboarx pushed a commit to littleboarx/vue-i18n-next that referenced this issue Sep 21, 2022
kazupon pushed a commit that referenced this issue Sep 22, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed Status: PR Welcome Welcome to Pull Request Type: Bug Bug or Bug fixes
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants