Как использовать vue-i18n с компонентами класса Vue?

Question

следующий код:

import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class SomeComponent extends Vue {
  public someText = this.$t('some.key')
}

Выдает ошибку:

[Vue warn]: Error in data(): "TypeError: i18n is undefined"

Я удостоверился, что Vue инициализирован с Vue.use(VueI18n) и new Vue({ /* ... */, i18n }). Объект i18n инициализируется следующим образом:

new VueI18n({
  locale: DEFAULT_LOCALE, // imported
  fallbackLocale: 'en',
  messages // imported
})

Переводы работают безупречно, если их вызывать не сразу, например, в шаблонах или в компонентных методах.

Эта vue-i18n проблема , кажется, подразумевает, что есть проблема инициализации.
Я мог бы обойти это, используя методы и переводя только в шаблонах, но есть определенный экземпляр вне моего контроля, в котором происходят такие немедленные вызовы: Vuetify input rules.

someRule = [(v) => !!v || this.$t('field.must_not_be_empty')]

Эти правила выполняются немедленно, даже если lazy-validation на Подтвердить формы .

Я определил два возможных решения:

1. Обход системы Vuetify rules и возможность простого возврата строки для перевода внутри самого шаблона;
2. Решение проблемы $t немедленной доступности.

К сожалению, я не смог выполнить ни одного из них.

Есть ли способ решить эту проблему?

Answer 1

Проблема заключалась в использовании this.
По сути, Vue нужен очень специфический контекст выполнения, который отличается от того, что обычно доступно в корневом контексте свежей class.

Решение оказывается очень простым: используйте геттер.

import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class SomeComponent extends Vue {
  public get someText () { return this.$t('some.key') }
}