Vue CLI - 从本地 JSON 解析组件中的嵌套数据答案

【问题标题】：Vue CLI - Parsing nested data in component from local JSONVue CLI - 从本地 JSON 解析组件中的嵌套数据
【发布时间】：2020-07-14 03:51:34
【问题描述】：

我想使用 Vue 组件从 JSON 中呈现以下视图：

JSON：

{
  "0": {
    "title": "Title0",
    "content": {
      "0": {
        "text": "few text here",
        "image": false
      }
    }
  },
  "1": {
    "title": "Title1",
    "content": {
      "0": {
        "text": "few text here",
        "image": false
      },
      "1": {
        "text": "few text here",
        "image": true,
        "imagePath": "../../Assets/images.sample.png"
      }
    }
  }
}

为了解析这些数据，我编写了以下 Vue 组件：

<template>
  <div>
    <section v-for="(data, index) in jsonTitle" :key="index">
      <h5>{{data.title}}</h5>
      <article v-for="(data, index) in jsonTitle" :key="index">
        <h6>{{data.content[0].text}}</h6>
        <img v-if="data.content[0].image === true" v-bind:src="data.imagepath" alt="">
      </article>
    </section>
  </div>
</template>
<script>
  import json from "@/components/json/english.json";
  export default {
    name: "databox",
    data() {
      return {
        jsonTitle: json
      };
    }
  };
</script>

我肯定在这段代码中遗漏了一些东西。我只得到第二个标题的第一个数据。请提供 Vue CLI 解决方案而不是 Vue.js，因为我是新手，还没有太多知识。

【问题讨论】：

标签： javascript json vue.js vuejs2 vue-cli

【解决方案1】：

首先，只要您的 JSON 中有数据列表，请使用数组而不是带有编号索引的对象。例如：

const json = [
  {
    "title": "Title0",
    "content": [
      {
        "text": "few text here",
        "image": false
      }
    ]
  }
]
...

我将名称jsonTitle 更改为profiles，以为这是一些个人资料数据。它使模板更易于学习，因为您有两个循环。每个循环都有自己的索引用作键。这是您的组件的外观：

<template>
  <div>
    <section v-for="(profile, indexProfile) in profiles" :key="indexProfile">
      <h5>{{ profile.title }}</h5>
      <article v-for="(content, indexContent) in profile.content" :key="indexContent">
        <h6>{{ content.text }}</h6>
        <img v-if="content.image === true" :src="content.imagePath" alt="">
      </article>
    </section>
  </div>
</template>

<script>
import json from "@/components/json/english.json";
export default {
  name: "databox",
  data() {
    return {
      profiles: json
    };
  }
};
</script>

还有一个错字是imagepath 而不是imagePath。这是demo

【讨论】：

谢谢丹的解决方案。

【解决方案2】：

“JSON 数据”是从后端接收还是您正在形成。如果您正在形成 JSON，而不是在对象内部创建对象，而是创建一个对象数组，如下所示。

[
 {
    "title": "Title0",
    "content": [
      {
        "text": "few text here",
        "image": false
      }
    ]
  },
 {
    "title": "Title1",
    "content": [
      {
        "text": "few text here",
        "image": false
      },
      {
        "text": "few text here",
        "image": true,
        "imagePath": "../../Assets/images.sample.png"
      }
    ]
  }
]

【讨论】：