VueJS:i18n在计算道具和数据道具中使用时不更新

时间:2018-05-18 12:18:03

标签: vue.js localization internationalization vuejs2 vue-i18n

我安装了vue-i18n(http://kazupon.github.io/vue-i18n/en/)库,以便在VueJS项目中进行本地化。

所以我现在正在尝试使用它,当在语言之间切换时,要更新的数据。所以这是我尝试使用它的方式:

示例1:

<template>
    <h1>{{ $t('message.hello') }}</h1>
</template>

示例2:

<template>
    <h1>{{ msg }}</h1>
</template>

组件中的代码如下所示:

<script>
export default {      
  data() {
    return {
      msg: this.localeTest //which is showing undefined all the time
      //here I also tried the "msg: this.$t('message.hello')" and
      //in this case the value of the inital language is displayed
      //but then it's never updated while switching languages
    };
  },
  computed: {
    localeTest() {
      return this.$t('message.hello');
    }
  },
  methods: {
    changeLocale() {
      if (this.$i18n.locale === 'ja-JP') {
        this.$i18n.locale = 'en-US';
      } else {
        this.$i18n.locale = 'ja-JP';
      }
    }
  }
};
</script>

示例1按预期工作,但我对示例2感兴趣。为此,我尝试了两种方案(在代码中的注释中描述),但它们都没有按预期工作。我更感兴趣的是让它适用于“计算属性”场景。

0 个答案:

没有答案