vue-i18n $ t со значением атрибута не переводится - PullRequest
Новая
       29

vue-i18n $ t со значением атрибута не переводится

0 голосов
/ 13 октября 2019

Я пытаюсь импортировать файл .json для использования в качестве файла перевода. 

<template>
    <template v-slot:footer>
      <div>{{ $t('menu.file.new.label', $i18n.locale, locale) }}</div> <--Issue outputs menu.file.new.label
    </template>
</template>

<script>
import locale from '@/locales/modules/messaging.json'

export default {
  data() {
    return {
      locale: locale
    }
  }
}
</script>

языковой стандарт из messaging.json не имеет ошибок и работает, если вместо этого я добавил следующее в начало

<i18n src="@/locales/modules/messaging.json"></i18n>

и изменил параметры функции, исключив $i18n.locale и locale, и это работает. К сожалению, это не вариант, так как я хочу передать данные компоненту внука. Однако, если я могу настроить внука на использование данных перевода их дедушки и бабушки, которые тоже работают ..

как я могу получить:

  1. Вышеуказанное для работы
  2. В качестве альтернативы можно использовать данные о переводе бабушки и дедушки в внуке
  3. В качестве альтернативы можно динамически импортировать данные о переводе в внуке на основе реквизита (расположение файла перевода, который необходимо импортировать)

Спасибо

Ответы [ 2 ]

1 голос
/ 13 октября 2019

Я нашел решение 

<template>
  <st-age v-bind:menus="menu" v-bind:locale="locale[$i18n.locale].menu">
    <template v-slot:content>message: {{ $route.params }}</template>
    <template v-slot:footer>
      <div>{{ $t('menu.file.label') }}</div>
    </template>
  </st-age>
</template>

<script>
import menu from './menu'
import locale from '@/locales/modules/messaging.json'

export default {
  data() {
    return {
      menu: menu,
      locale: locale
    }
  },
  i18n: {
    messages: locale
  },
  components: {
    'st-age': () => import('@/components/layout/stage/container')
  }
}
</script>

<style>
</style>

locale[$i18n.locale].menu передает данные перевода, которые мне действительно нужны, а не весь объект (который тоже работает)

в дочернем компоненте, я простопередать эти данные в качестве опоры внуку

в внуке i 

 mounted() {
    this.$i18n.setLocaleMessage(this.$i18n.locale, this.locale)
  }

, где this.locale - данные перевода, а $t('file') - все, что я установил в en.menu.file вимпортированные данные глобального перевода

0 голосов
/ 13 октября 2019

Прежде всего, вы должны создать плагин, как показано ниже:

src / plugins / i18n.js: 

import Vue from 'vue';
import VueI18n from 'vue-i18n';

const DEFAULT_LOCALE = 'en';

Vue.use(VueI18n);

const i18n = new VueI18n({
    locale: yourLocale || DEFAULT_LOCALE, // set locale either from localStorage or config
    fallbackLocale: DEFAULT_LOCALE,
    messages: require('messages.json'), // set locale messages
    sharedMessages: require('other.json if exist'),
    silentFallbackWarn: true,
});

export default i18n;

Затем вызовите его из main.js для глобализации: 

import i18n from './plugins/i18n.js';
...
new Vue({
    i18n,
    router,
...
    render: h => h(App),
}).$mount('#app');

Затем, если вы хотите продолжить с пользовательскими сообщениями, вы можете установить его с помощью блока i18n, например: 

<script>
data(){
...
}
methods: ...
i18n: {
 messages: require(your json path....)
}
</script>

Затем вы можете вызвать его как: 

$t('test');
...