Necesito concatenar una clave json para mostrar los contenidos 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 debo mostrar los contenidos. Pero no puedo concatenar lang en heading . Intenté diferentes maneras pero nada funciona.
<template> <h1 class="banner-title">{{banner.home.heading_+banner.home.lang}}</h1> </template>gracias
<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 a su secuencia de comandos agregue la 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 están cambiando solo configúrelo una vez
computed: { // a computed getter computedHeading: function () { let prefix = "heading_" let headingPath = prefix+this.banner.home.lang return this.banner.home[headingPath] } }With string interpolation {{`${banner.home.heading_} some text ${banner.home.lang}`}}