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.use(VueI18n)和new Vue({ /* ... */, i18n })初始化Vue。 i18n对象的初始化方式如下：

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

只要不立即调用翻译（例如在模板或组件方法中），它们就可以很好地工作。

此vue-i18n issue似乎暗示存在初始化问题。
我可以通过使用方法并仅在模板中进行转换来解决此问题，但是在我无法控制的情况下，发生了这样的立即调用：Vuetify input rules。

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

即使Vuetify forms上的lazy-validation也会立即执行这些规则。

我确定了两种可能的解决方案：

绕过Vuetify rules系统，并允许简单地返回要在模板本身内转换的字符串；
解决$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') }
}

Answer 2

在Vuetify输入规则的上下文中，将错误消息放入getter的解决方案对我不起作用，我得到了这一点：Error in beforeMount hook: "TypeError: Cannot read property '_t' of undefined"

我设法通过两种可能的方式使其工作：

使用吸气剂，但要使用整个规则数组：

get someRules() {
    return [
        (v) => !!v || this.$t('field.must_not_be_empty')
    ];
}

将规则放置在@Component装饰器中：

@Component({
    data() {
        return {
            someRules: [
                (v) => !!v || this.$t('field.must_not_be_empty')
            ]
        };
    }
})
export default class SomeComponent extends Vue {
...
}

如何将vue-i18n与Vue类组件一起使用？

2 个答案: