vue.js - Vue-i18n 更改语言环境不更新所有内容

Question

我是 vue-i18n 的新手，接缝很好，但可能会遇到一些挑战。

更改语言环境时，所有模板翻译都会按预期更新，但是当

脚本

data() {
  return {
    locales: {
      en: this.$i18n.t('topnav.lang.english'),
      da: this.$i18n.t('topnav.lang.danish'),
      sw: this.$i18n.t('topnav.lang.swedish'),
      no: this.$i18n.t('topnav.lang.norwegian'),
    }
  }
},

模板

在职的

{{$t('topnav.lang.english')}}

不工作

<a class="dropdown-item">{{locales.en}}</a>

不工作

<a class="dropdown-item" @click="changeLocale(key)" v-for="(value, key) in locales">{{value}}</a>

我已经尝试了很多东西，例如。延迟加载语言文件等，但没有运气。

Answer 1

从数据变为计算，数据本身不是反应性的，但幸运的是计算是！

如果您不想使用计算，另一种方法是直接将您的翻译放入模板中