Используйте vue-i18n внутри скрипта

Question

У меня есть простой проект codesandbox

Я использую / vue-i18n

Hello World шаблон:

<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",
  }
};

Вопрос: Как я могу использовать vue-i18n из сценария, например msg: {{$ t ("welcomeMsg")}}?

PS: this.$t("welcomeMsg") это работано не переводи!

Answer 1

Для строки шаблона ES6 вам нужно использовать синтаксис ${ } вместо {{ }}:

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

Но здесь не требуется использовать строку шаблона (если вы не хотите добавить дополнительный текст до илипосле сообщения);просто сделайте это:

msg: this.$t("welcomeMsg")

И, наконец, если вы не планируете модифицировать msg, тогда это должно быть вычисляемое свойство:

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