Tidak dapat menukar tempat secara dinamik untuk Vue i18n

Question

Saya mempunyai aplikasi vue kecil di mana saya ingin melaksanakan pemalam vue-i18n untuk menjadikan aplikasi saya berbilang bahasa. Saya telah memasang pemalam vue-i18n daripada vue cli. Saya mempunyai dua tempat dan semuanya berfungsi seperti yang diharapkan - apabila saya menukar tempat secara manual daripada fail .env kepada bahasa yang diingini, bahasa dalam aplikasi juga berubah. Walau bagaimanapun, apabila saya cuba menukarnya menggunakan butang pada bahagian hadapan, saya gagal berbuat demikian.

Ini ialah kandungan fail i18n.js saya:

import { createI18n } from 'vue-i18n'

function loadLocaleMessages() {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i);
  const messages = {};
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i);
    if (matched && matched.length > 1) {
      const locale = matched[1];
      messages[locale] = locales(key);
    }
  })
  return messages;
}

export default createI18n({
  legacy: false,
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages()
})

Ini ada dalam fail .env:

VUE_APP_I18N_LOCALE=en
VUE_APP_I18N_FALLBACK_LOCALE=en

Ini ialah kod daripada tutorial yang saya lihat, mereka mengakses setempat melalui ini.$i18n.locale, namun, ini tidak berfungsi untuk saya, ini adalah cara saya cuba melaksanakannya:

<template>
  <div class="hello">
    <h1>Hello World</h1>
    <h2>{{ t("hello") }}</h2>
    <h2>{{ t("message") }}</h2>
    <button @click="SetLocale('en')">EN</button>
    <button @click="SetLocale('nl')">NL</button>
  </div>
</template>
    
<script>
import { useI18n } from "vue-i18n";
export default {
  name: "HelloWorld",
  setup() {
    const { t } = useI18n({
      inheritLocale: true,
      useScope: "local",
    });

    // Something todo ..

    return {
      t
    };
  },
  methods: {
    SetLocale(locale) {
      console.log(locale);
      this.$i18n.locale = locale;
    },
  },
};
</script>
    
<i18n>
{
  "en": {
    "hello": "Hello i18n in English! (from component)",
  },
  "nl": {
    "hello": "Hello i18n in Dutch! (from component)",
  }
}
</i18n>

Ralat yang berlaku apabila mengklik butang ialah:

[Vue warn]: Ralat tidak dikendalikan semasa pelaksanaan pengendali acara asli

Uncaught TypeError: Tidak boleh menetapkan sifat undefined (set 'Tempatan')

Saya mencuba beberapa penyelesaian lain seperti i18n.locale dan ini.$root.$i18n.locale tetapi ia juga nampaknya tidak berkesan.

Selain itu, apabila saya cuba mengakses

{{ t("message") }}

mesej daripada fail JSON dalam folder locale, saya mendapat amaran ini:

[intlify] Kekunci 'message' tidak ditemui dalam mesej locale 'nl'.

[intlify] Berundur untuk menterjemah kunci "mesej" dengan "en" locale

[intlify] Tidak dapat mencari kunci 'Mesej' dalam mesej setempat 'en'.

[intlify] Berundur menggunakan tempat "nl" untuk menterjemah kekunci "mesej"

Soalan saya ialah, di manakah saya melakukan sesuatu yang salah dan adakah terdapat cara untuk menyingkirkan amaran yang saya terima apabila saya cuba mengakses fail JSON daripada folder setempat?

Answer 1

Saya menggunakan kombo jadi tidak 100% pasti ini akan berkesan untuk anda, tetapi ini berkesan untuk saya:

Ditukar daripada

i18n.locale = selectedLocale

kepada

i18n.global.locale = selectedLocale

Semoga membantu. :)