如何使用 vue i18n 翻译数据/道具对象中的字符串？

Question

我使用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')")

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

Answer 1

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

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