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

Posted

技术标签:

【中文标题】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"
      
    ]
  
]

【讨论】:

以上是关于Vue CLI - 从本地 JSON 解析组件中的嵌套数据的主要内容,如果未能解决你的问题,请参考以下文章

在vue-cli3中使用axios获取本地json

axios请求VUE-CLI3项目本地json文件404

vue-cli中的build.js配置文件详细解析

Vue-cli3.0项目下axios请求本地json文件的数据

[转] Vue + Webpack 组件式开发(练习环境)

十Vue-cli组件定义和本地样式