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

Question

我想使用 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，因为我是新手，还没有太多知识。

Answer 1

"JSON data" 是从后端接收的还是您正在构建的。如果你正在形成 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"
      }
    ]
  }
]

Answer 2

首先，只要您的 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

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

Vue CLI - Parsing nested data in component from local JSON

javascript

json

vue.js

vuejs2

vue-cli