Впервые работаю с Vue.js и понятия не имею, что такое $t. Например, у меня есть такой код:

 <li class="category-filter__back">
   <button
     class="category-filter__button"
     @click="back(categoryPath)">
     {{ $t(backButtonText) }} <<<<<<<< what is this $t?
   </button>
 </li>

Не могу найти на это конкретного ответа.

10
shaz 24 Сен 2018 в 14:13

2 ответа

Лучший ответ

Похоже на функцию для переводов. Может быть, это: http://kazupon.github.io/vue-i18n?

16
Marcin 24 Сен 2018 в 11:17

$ t здесь должен быть расширенным методом экземпляра Vue Vue I18n. ,

Вот пример на jsfiddle:

< Сильный > Шаблон

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

<div id="app">
  <!-- string literal -->
  <p v-t="'hello'"></p>

  <!-- keypath biniding via data -->
  <p v-t="path"></p>

  <!-- extended Vue instance method -->
  <p>{{ $t("wait") }}</p>

  <button @click="changeLocale()">
    {{ $t("buttonText") }}
  </button>
</div>

< Сильный > Сценарий

new Vue({
  el: '#app',
  i18n: new VueI18n({
    locale: 'en',
    messages: {
      en: { hello: 'hi there', bye: 'see you later', wait: 'just a minute', buttonText: 'Change to Chinese Locale' },
      cn: { hello: '你好', bye: '再见', wait: '稍等一下', buttonText: '更改为英文场景' }
    }
  }),
  data: { path: 'bye' },
  methods: {
    changeLocale() {
        this.$i18n.locale = this.$i18n.locale === 'en' ? 'cn' : 'en'
    }
  }
})
5
Yuci 24 Сен 2018 в 12:36