Así que digamos que quiero agregar este {{ $t('index-p1') }} dentro del valor de title .
items: [
{
icon: 'mdi-apps',
title: 'Welcome',
to: '/'
},
Estoy usando esto para i18n y los datos que contiene {{ $t('index-p1') }} se almacenan en un archivo JSON. Funciona bien si lo uso en un archivo de plantilla de Vue, pero no en datos, no recuerdo cómo hacer esta parte.
items deben definirse como propiedad computada y acceder a $t usando this :
computed:{
items(){
return [
{
icon: 'mdi-apps',
title: this.$t('welcome'),
to: '/'
}
]
}
}
Puede usar la propiedad calculada y llamarla con this.$t :
const messages = {
en: {
message: {
hello: 'hello world'
}
},
fr: {
message: {
hello: 'bonjour'
}
}
}
const i18n = new VueI18n({
locale: 'en',
messages,
})
new Vue({
i18n,
computed: {
text() { return this.$t("message.hello")}
},
methods: {
setLang(lang) {
i18n.locale = lang
}
}
}).$mount('#demo')
items: [
{
icon: 'mdi-apps',
title: 'Welcome',
to: '/'
},
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-i18n/8.15.5/vue-i18n.min.js"></script>
<div id="demo">
<button @click="setLang('fr')">fr</button>
<button @click="setLang('en')">en</button>
<p>{{ $t("message.hello") }}</p>
{{ text }}
</div>