Как использовать переменные в шаблоне Vue?

Question

[alekseivanov]

Я хочу использовать i18n
https://github.com/Haixing-Hu/vue-i18n

Я прописал в файле main.js

var Vue = require('vue');
var i18n = require('vue-i18n');

Vue.use(i18n, {
  baseUrl: 'resources/i18n'
});

new Vue({
  el: '#test-i18n',
  beforeCompile: function() {
    this.$setLanguage("zh-CN");
  },
  methods: {
    switchLanguage: function(lang) {
      this.$setLanguage(lang);
    }
  }
});

Я пытаюсь использовать переменные в файлах шаблона

<div id="test-i18n" class="message">
  <p>Language: {{$language}}</p>
  <p>{{$i18n.message.hello}}, {{$i18n.message.world}}</p>
</div>

В итоге это не срабатывает, при сборке в консоли браузера написано

Property or method "$language" is not defined on the instance but referenced during render. Make sure...
Property or method "i18n" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property...

Как сделать так, чтобы шаблон видел эти переменные?

Comments

[Roman K]

Оформи код нормально

[alekseivanov]

Roman Kitaev, как это сделать?

[Roman K]

alekseivanov, пораскинуть мозгами, посмотреть возможности сервиса и редактора текста

Answer 1

[0xD34F]

beforeCompile:

Вот как? А версия vue у вас используется какая? Случайно не вторая? Если да, то...

Ну и в целом - это довольно смело, пытаться использовать плагин, не обновлявшийся три года. Есть мнение, что вам следует найти что-нибудь посвежее.

Comments

[alekseivanov]

Может быть, проблема с этим плагином именно в этом.
Но я вообще не могу видеть глобальные переменные, вроде $store, используя шаблоны vue, хотя везде написано что-то вроде "чтобы использовать глобальные переменные в шаблонах, пользуйтесь конструкцией вида {{$store.state.myname}}

[0xD34F]

alekseivanov, "может быть"? То есть, вы не знаете, какая у вас версия vue. Не вижу, о чём ещё после этого можно говорить. Удачи вам в решении ваших проблем.

Answer 2

[Klein Maximus]

Думаю, что проблема в несоответствии версий Vue и плагина https://github.com/Haixing-Hu/vue-i18n.
Для интернационализации есть более свежие пакеты, например https://kazupon.github.io/vue-i18n/.