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

I18n cannot respond to language changed in children components #201

Open
4 tasks done
zoiewleung opened this issue Aug 18, 2021 · 1 comment
Open
4 tasks done

I18n cannot respond to language changed in children components #201

zoiewleung opened this issue Aug 18, 2021 · 1 comment
Labels
Status: Review Needed Request for review comments

Comments

@zoiewleung
Copy link

Reporting a bug?

For projects created by vue-cli4, internationalization is supported using Vue add I18N. When the children component and parent component contain SFC I18N tags at the same time, the language of the children component cannot be correctly switched to the current language when switching the language in the parent component

Expected behavior

When switching languages, subcomponents can correctly respond to language changes

Reproduction

Detail and reappear
Vue-cli:
version: @vue/cli 4.5.13

Step:
1、Vue create i18n-demo
2、vue add i18n
Options:

📦 Installing vue-cli-plugin-i18n...

91 packages are looking for funding
run npm fund for details

✔ Successfully installed plugin: vue-cli-plugin-i18n
? The locale of project localization. en
? The fallback locale of project localization. en
? The directory where store localization messages of project. It's stored under src directory. locales
? Enable locale messages in Single file components ? Yes

🚀 Invoking generator for vue-cli-plugin-i18n...

Vue.config.js:
module.exports = {
pluginOptions: {
i18n: {
locale: "en",
fallbackLocale: "en",
localeDir: "locales",
enableInSFC: true,
},
},
};
parent compoent:

Vue logo
{{ $t("lang") }}
<script> // @ is an alias to /src import HelloI18n from '@/components/HelloI18n.vue' export default { name: 'Home', components: { HelloI18n, }, methods: { handler() { this.$i18n.locale = this.$i18n.locale == 'en' ? 'ja' : 'en' }, }, } </script> { "en": { "lang":"change language", "about": "about" }, "ja": { "lang":"言語を切り替え", "about": "について" } }

children component:

{{ $t("hello") }}

<script> export default { name: "HelloI18n", }; </script> { "en": { "hello": "Hello i18n in SFC!" }, "ja": { "hello": "こんにちは、i18n in SFC!" } }

System Info

node:v14.17.3
vue-cli: @vue/cli 4.5.13

Screenshot

image

Additional context

No response

Validations

  • Read the Contributing Guidelines
  • Read the README
  • 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 Discussion.
@zoiewleung zoiewleung added the Status: Review Needed Request for review comments label Aug 18, 2021
@zoiewleung
Copy link
Author

Vue ver: ^2.6.11
vue-i18n ver: ^8.25.0
intlify/vue-i18n-loader ver: ^1.1.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Review Needed Request for review comments
Projects
None yet
Development

No branches or pull requests

1 participant