Использование vue -i18n для перевода значения по умолчанию для свойства компонента Vue - PullRequest
Новая
       70

Использование vue -i18n для перевода значения по умолчанию для свойства компонента Vue

0 голосов
/ 06 августа 2020

Я использую vue-i18n для локализации в моем приложении. Мне нужно применить локализацию к значению по умолчанию для опоры компонента: 

export default {
  name: 'ExampleComponent',
  props: [{
    prompt: {
      required: false,
      type: String,
      default: $t('example.prompt.default')
   }]
}

$t, очевидно, не входит в область действия, как показано, но кажется, что в этот момент значение по умолчанию для опоры оценивается , this также не является самим компонентом, поэтому this.$t также не определен.

Как лучше всего использовать VueI18n для преобразования значения default для опоры?

Ответы [ 2 ]

1 голос
/ 06 августа 2020

Вы можете получить доступ к $t в функции обратного вызова, поскольку обратный вызов оценивается в контексте созданного компонента. 

prompt: {
  required: false,
  type: String,
  default: function () {
    this.$t('example.prompt.default')
  }
}

Обратной стороной здесь является то, что значение будет undefined в beforeCreate крючок жизненного цикла. Если он вам там нужен, лучше всего вместо этого установить значение по умолчанию для ключа вашего определения i18n (example.prompt.default) и использовать вместо него this.$t(this.prompt).

0 голосов
/ 06 августа 2020

Вы можете импортировать экземпляр VueI18n из того места, откуда вы его импортировали. 

import i18n from '../i18n'

export default {
  name: 'ExampleComponent',
  props: [{
    prompt: {
      required: false,
      type: String,
      default: i18n.t('example.prompt.default')
   }]
}

i18ns. js

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

Vue.use(VueI18n)

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 new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages()
})
...