Menu
First time ever working with Vue.js and have no clue what is $t. For instance I have someone's code like this:
<li class="category-filter__back"> <button class="category-filter__button" @click="back(categoryPath)"> {{ $t(backButtonText) }} <<<<<<<< what is this $t? </button> </li> Can't seem to find any concrete answer for this.
449
The v-cloak directive is a Vue. js directive that will remain on the element until the associated Vue instance finishes compilation. Combined with CSS rules such as [v-cloak] { display: none }, this directive can be used to hide uncompiled mustache bindings until the Vue instance is ready.
data # A function that returns the initial reactive state for the component instance. The function is expected to return a plain JavaScript object, which will be made reactive by Vue.
The v-bind directive instructs Vue to keep the element's id attribute in sync with the component's dynamicId property. If the bound value is null or undefined , then the attribute will be removed from the rendered element.
In Vue, templating is the main way we create reusable components. We can use templates to take data, and turn it into real elements on a screen that users can see.
It looks like a function for translations. Maybe that: http://kazupon.github.io/vue-i18n?
164
$t here should be an extended Vue instance method of Vue I18n.
Here is an example on jsfiddle:
Template
<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> Script
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' } } }) If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
