我安装了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感兴趣。为此,我尝试了两种方案(在代码中的注释中描述),但它们都没有按预期工作。我更感兴趣的是让它适用于“计算属性”场景。