• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

125
Vistas
¿Cómo llamo a un objeto dentro de los datos de Vue como el valor de un elemento?

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.

almost 3 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

items deben definirse como propiedad computada y acceder a $t usando this :

 computed:{
 items(){
 return [
 {
 icon: 'mdi-apps',
 title: this.$t('welcome'),
 to: '/'
 }
 ]
 }
}
almost 3 years ago · Santiago Trujillo Denunciar

0

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>

almost 3 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda