如何连接来自 API 的 JSON 响应中的键并在 VUE 组件中显示

Question

我需要连接一个 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>

谢谢

Answer 1

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

编辑：明确要求后

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

在你的脚本中添加computed property

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]
  }
}

Answer 2

With string interpolation {{`${banner.home.heading_} some text ${banner.home.lang}`}}