Impossible de changer dynamiquement les paramètres régionaux pour Vue i18n

Question

J'ai une petite application vue dans laquelle je souhaite implémenter le plugin vue-i18n pour rendre mon application multilingue. J'ai installé le plugin vue-i18n depuis vue cli. J'ai deux paramètres régionaux et tout fonctionne comme prévu - chaque fois que je modifie manuellement les paramètres régionaux du fichier .env vers la langue souhaitée, la langue de l'application change également. Cependant, chaque fois que j'essaie de le modifier à l'aide des boutons du frontend, je n'y parviens pas.

Voici le contenu de mon fichier i18n.js :

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()
})

C'est dans le fichier .env :

VUE_APP_I18N_LOCALE=en
VUE_APP_I18N_FALLBACK_LOCALE=en

C'est le code des tutoriels que j'ai vu, ils accèdent aux paramètres régionaux via this.$i18n.locale, cependant, cela ne fonctionne pas pour moi, voici comment j'ai essayé de l'implémenter :

<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>

L'erreur qui se produit lorsque vous cliquez sur le bouton est :

[Vue warn] : Erreur non gérée lors de l'exécution du gestionnaire d'événements natif

Uncaught TypeError : impossible de définir la propriété non définie (définie 'Local')

J'ai essayé d'autres solutions comme i18n.locale et this.$root.$i18n.locale mais elles ne semblent pas fonctionner non plus.

De plus, lorsque j'essaie d'accéder au

{{ t("message") }}

du message à partir du fichier JSON dans le dossier locale, je reçois ces avertissements :

[intlify] La clé 'message' n'a pas été trouvée dans le message local 'nl'.

[intlify] Retour à la traduction de la clé "message" avec les paramètres régionaux "en"

[intlify] Impossible de trouver la clé « Message » dans les messages régionaux « en ».

[intlify] Utilisation de la locale "nl" pour traduire la clé "message"

Ma question est la suivante : où est-ce que je fais quelque chose de mal et existe-t-il un moyen de supprimer l'avertissement que je reçois lorsque j'essaie d'accéder à un fichier JSON à partir du dossier de paramètres régionaux ?

Answer 1

J'utilise Combo, donc je ne suis pas sûr à 100 % que cela fonctionnera pour vous, mais cela a fonctionné pour moi :

Changé de

i18n.locale = selectedLocale

à

i18n.global.locale = selectedLocale

J'espère que cela vous aidera. :)