在脚本中使用 vue-i18n

Question

我有一个简单的项目codesandbox

Hello World 模板：

<h1>{{msg}}</h1>

和脚本:

data() {
    return {
      msg: `{{ $t("welcomeMsg") }}`
    }
  }

Plugins/i18n.js :

const messages = {
  en: {
    welcomeMsg: "Welcome to Your Vue.js App",
  },
  es: {
    welcomeMsg: "Bienvenido a tu aplicación Vue.js",
  }
};

问题： 我如何从 msg:{{ $t("welcomeMsg") }}?[=17= 这样的脚本中使用 vue-i18n ]

P.S: this.$t("welcomeMsg") 这是工作，但无法翻译！

Answer 1

对于 ES6 模板字符串，您需要使用 ${ } 语法而不是 {{ }}:

msg: `${this.$t("welcomeMsg")}`

但是这里不需要使用模板字符串（除非你想在消息之前或之后添加额外的文本）；只需这样做：

msg: this.$t("welcomeMsg")

最后，如果您不打算修改 msg，那么它应该是计算的属性:

computed: {
  msg() {
    return this.$t("welcomeMsg")
  }
}

Use vue-i18n inside script