如何在Vue.js中使用vue-i18n将翻译文本赋值给data内变量

你直接在data中写$t('title')无法正常取值，是因为$t是挂载在Vue实例上的全局方法，在组件script内部调用必须通过this指向当前实例。另外要注意，data中的变量仅在组件初始化时赋值一次，如果你需要支持切换语言后文本自动更新，优先使用计算属性方案。

方案1：计算属性（推荐，支持响应式语言切换） #

vue-i18n的$t方法本身是响应式的，放在计算属性中时，语言切换后title会自动更新为对应语言的翻译内容，代码如下：

<template>
  <div> {{title}}</div>
</template>

<script>
export default {
  name: "Forex",
  computed: {
    title() {
      return this.$t('title')
    }
  }
}
</script>

方案2：生命周期钩子赋值（仅需取一次翻译值时使用） #

如果你确定当前页面不需要响应语言切换，只需要在页面加载时取一次当前语言的翻译，可以在created钩子中给data变量赋值：

<template>
  <div> {{title}}</div>
</template>

<script>
export default {
  name: "Forex",
  data() {
    return {
      title: ''
    }
  },
  created() {
    this.title = this.$t('title')
  }
}
</script>

注意：不建议直接在data的返回值中写title: this.$t('title')，如果你的项目是异步加载翻译资源，组件初始化时翻译可能还未加载完成，会导致拿到的是title这个key值而非翻译内容。

内容的提问来源于stack exchange，提问作者desh