在脚本中使用vue-i18n

Question

我有一个简单的项目码箱

我使用/vue-i18n

Hello 模板：

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

和脚本

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

插件/i18n.js :

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

问题：如何使用msg:{{ $t("welcomeMsg") }}等脚本中的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")
  }
}