如何使用 vue i18n 翻译 data/props 对象中的字符串？

问题描述

我使用 Vuei18n 包。我的应用程序中有很多字符串在数据对象中定义或作为道具传递到自定义组件中，需要进行翻译。

data() {
  return {
     title: this.$t('main.title'),stuff: [
       {
         name: this.$t('main.name_1')
       },{
         name: this.$t('main.name_2')
       }
     ]
  }
}

或

MyCustomComponent(:name="$t('main.custom_component_name')")

问题是，如果我更改语言环境，这些字符串将不会被翻译。那些直接在模板部分定义的字符串在更改语言环境后立即按预期翻译。

解决方法

data 中的值不是响应式的，请尝试使用 computed

computed: {
  stuff() {
    return [{
        name: this.$t('main.name_1')
      },{
        name: this.$t('main.name_2')
      }]
  }
}