Necesito concatenar una clave json para mostrar el contenido según el idioma actual seleccionado. En API, obtengo la respuesta y el idioma actual seleccionado. La respuesta es como a continuación.

{
  lang : "en"
  heading_ar: "قابل وتناول واستمتع بالاختبار الحقيقي"
  heading_en: "Meet, Eat & Enjoy the true test"
  description_ar: "<p>هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة</p>"
  description_en: "<p>It is a long established fact that a</p>"
  id: 1
}

En la plantilla debería mostrar el contenido. Pero no puedo concatenar lang en heading . Intenté de diferentes formas pero nada funciona.

<template>
<h1 class="banner-title">{{banner.home.heading_+banner.home.lang}}</h1>
</template>

Gracias

2
matheen ulla 27 nov. 2021 a las 11:39

2 respuestas

La mejor respuesta
<template>
<h1 class="banner-title">{{banner.home.heading_en}}{{banner.home.lang}}</h1>
</template>

EDITAR: después de aclarar los requisitos

<template>
    <h1 class="banner-title">{{computedHeading}}</h1>
</template>

Y agregue a su secuencia de comandos propiedad calculada

computed: {
// a computed getter
  computedHeading: function () {
    if(this.banner.home.lang == "en"){
      return this.banner.home.heading_en
    }else{
      return this.banner.home.heading_ar
    } 
}

}

EDITAR: después de que OP dijo que tiene optimización de muchos idiomas

Tenga en cuenta que esto no necesita ser una propiedad calculada, si sus datos no cambian, solo establezca esto una vez

computed: {
// a computed getter
  computedHeading: function () {
        let prefix = "heading_"
        let headingPath = prefix+this.banner.home.lang
        return this.banner.home[headingPath]
  }
}
1
Vojin Purić 27 nov. 2021 a las 12:55
¿cómo funcionará esto? Quiero mostrar el encabezado_en o el encabezado_ar, no ambos
 – 
matheen ulla
27 nov. 2021 a las 11:56
Esa no era tu pregunta, haré una edición para ayudarte con eso también.
 – 
Vojin Purić
27 nov. 2021 a las 12:09
Necesito concatenar la clave json. basado en eso debo tomar el valor
 – 
matheen ulla
27 nov. 2021 a las 12:12
La propiedad calculada está funcionando bien. pero tiene muchos idiomas, por lo que debería dar una condición a cada idioma.
 – 
matheen ulla
27 nov. 2021 a las 12:50
Espero que esta nueva edición responda a tu pregunta. En el futuro, indique todos sus requisitos / escenarios con anticipación cuando haga la pregunta
 – 
Vojin Purić
27 nov. 2021 a las 12:57
With string interpolation {{`${banner.home.heading_} some text ${banner.home.lang}`}}
0
mianbato 27 nov. 2021 a las 12:22
No está trabajando.
 – 
matheen ulla
27 nov. 2021 a las 12:08
Tengo un problema para escapar del texto jajaja
 – 
mianbato
27 nov. 2021 a las 12:12
Intenté así para {{${banner.home.heading_+banner.home.lang}}} pero no funcionó
 – 
matheen ulla
27 nov. 2021 a las 12:15
$ {variable_or_function} texto estático $ {other_variable_or_function} todo entre esas comillas
 – 
mianbato
27 nov. 2021 a las 12:18