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

Posted 2023-02-16

【中文标题】Vue CLI - 从本地 JSON 解析组件中的嵌套数据

【英文标题】：Vue CLI - Parsing nested data in component from local 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" >
      </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，因为我是新手，还没有太多知识。

【参考方案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" >
      </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"
      
    ]
  
]