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

从数据变为计算，数据本身并不是 react 性的，但幸运的是计算是!

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