[英]How to concatenate a key in JSON response coming from API and display in VUE component
我需要连接一个 json 键来根据当前选择的语言显示内容。 在 API 中,我正在选择响应和当前语言。 响应如下
{
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
}
在模板中我应该显示内容。 但我无法在heading
中连接lang
。 我尝试了不同的方法,但没有任何效果。
<template>
<h1 class="banner-title">{{banner.home.heading_+banner.home.lang}}</h1>
</template>
谢谢你
<template>
<h1 class="banner-title">{{banner.home.heading_en}}{{banner.home.lang}}</h1>
</template>
编辑:澄清要求后
<template>
<h1 class="banner-title">{{computedHeading}}</h1>
</template>
并在您的脚本中添加计算属性
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
}
}
}
编辑:在 OP 说他有很多语言优化之后
请注意,这不需要计算属性,如果您的数据没有更改,只需设置一次
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}`}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.