如何连接来自 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}`}}

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

How to concatenate a key in JSON response coming from API and display in VUE component

javascript

inertiajs

laravel

vue.js