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

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

如果您不想使用计算

，另一种方法是直接将您的翻译放入模板中

Vue-i18n 更改区域设置不更新所有内容

Vue-i18n change locale not updating everything

vue.js

vue-i18n