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 解析组件中的嵌套数据的主要内容,如果未能解决你的问题,请参考以下文章