Динамическое изменение локали в приложении Vue не обновляет переведенные значения на страницах. ⇐ Javascript

[Гость]

У меня есть большое приложение Vue (с использованием Vuetify), и недавно я включил в него vue-i18n. У меня настроены и работают файлы перевода json, а вызовы $t() работают нормально в моих компонентах и ​​других файлах .js. Однако мне не удалось изменить языковой стандарт на лету, чтобы текст во всех переведенных полях отображал соответствующий язык. Если я изменю свое определение new Vue18n({}) и сохраню файл, он будет работать нормально, и все мои переведенные значения будут отображаться нормально.

В моем случае у меня есть варианты выбора в виде пунктов меню

человек {{ getUser.userId }} Пароль Выход английский испанский и обработчик кликов, который передает соответствующую локаль методу:

setLocale(locale) { this.$root.$i18n.locale = локаль; }, где VueI18n определен здесь:

импортировать Vue из 'vue'; импортируйте VueI18n из «vue-i18n»; Vue.use(VueI18n); функция loadLocaleMessages() { const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i); константные сообщения = {}; locales.keys().forEach((key) => { const matched = key.match(/([A-Za-z0-9-_]+)\./i); if (соответствует && matched.length > 1) { const локаль = соответствует [1]; сообщения [локаль] = локали (ключ); } }); возврат сообщений; } экспортировать новый VueI18n по умолчанию({ локаль: 'en', localeDir: 'локали', FallbackLocale: 'en', сообщения: loadLocaleMessages(), }); Я также пробовал варианты, например

this.$i18n.locale = локаль; и

i18n.locale = локаль; после того, как сделал

импортировать i18n из `@/i18n'; в компоненте. Однако почти никто из них не меняет все значения имени моего поля, имеющие переводы. Это почти как если бы мне пришлось принудительно повторно отображать переведенные значения после изменения языка.

Нужно ли мне сделать что-то другое, чтобы все мои переведенные значения обновлялись после выбора другого языка?

ОБНОВЛЕНИЕ: Основываясь на комментарии Ромена Винсента ниже, я понял, что пропустил важную часть своей настройки. Для каждого поля существует несколько атрибутов Vuetify, и они извлекаются в отдельный файл fields.js. Например, вот несколько определений полей из шаблона:

... импортировать {поля, кнопки, csvFields} из '@/comComponents/config/users'; ... данные: () => ({ поля, ... }) а вот fields.js:

импортировать RuleGenerator из '@/utils/RuleGenerator'; импортировать i18n из @/i18n; константные поля = { ID пользователя: { метка: i18n.t('users.generalInfo.userId'), // Установите метку «Электронная почта», поскольку имя пользователя должно быть адресом электронной почты. правила: новый RuleGenerator('Email') .setRequired() .setMin(1) .setMax(255) // eslint-disable-next-line no-useless-escape .setRegEx(/^(([^()\[\]\\.;:\s@"]+(\.[^()\[\]\\.,;:\s @"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{ 1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}) )$/) .getRules(), подсказка: «Должен быть действительный адрес электронной почты», счетчик: '255', }, идентификатор: { метка: i18n.t('users.generalInfo.id'), }, }; экспортировать поля по умолчанию; Именно эти поля не меняют локали. Однако, если я привяжу метку непосредственно в компоненте:

изменение локали прекрасно обновляет значение метки. Таким образом, проблема связана с этим связанным файлом, хотя он включает i18n.js, где установлен locale.

ОБНОВЛЕНИЕ 2: Кажется, другие люди тоже столкнулись с этой проблемой (см. эту проблему на GitHub).