Vue i18n TypeError: Cannot read property '_t' of undefined

Question

我尝试在组件的 ts 文件中使用 vue-i18n，如下所示：

export default class MyComponent extends Vue {
  readonly i18nTitle = this.$t('translation.key');

  //...
}

但我收到错误消息：

TypeError: Cannot read property '_t' of undefined Whosebug

此错误仅在我尝试在 ts 文件中使用 i18n 时出现，但在 html.

中使用时它工作正常

我的i18n配置真的很基础：

// i18n/index.ts
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import fr from './translations/fr.json';

Vue.use(VueI18n);

export const i18n = new VueI18n({
  locale: 'fr',
  fallbackLocale: 'fr',
  messages: {
    fr,
  },
});

// maint.ts
import { i18n } from './i18n';

new Vue({
  el: '#app',
  i18n,
  components: { App },
  template: '<App/>',
});

知道我错过了什么吗？

Answer 1

玩了一下发现用getter就可以了。

我是这样翻译 ts 文件中的文本的：

export default class MyComponent extends Vue {
  get i18n() {
    return {
      title: this.$t('translation.key');
    };
  }
}

并像这样在 html 中使用它：

<h1>{{i18n.title}}</h1>

Vue i18n TypeError: Cannot read property '_t' of undefined

Vue i18n TypeError: Cannot read property '_t' of undefined

vue.js

vue-i18n