Vue 使用 v-for 迭代 API 响应的嵌套数组
Posted
技术标签:
【中文标题】Vue 使用 v-for 迭代 API 响应的嵌套数组【英文标题】:Vue use v-for to iterate over an nested array of API response 【发布时间】:2020-12-12 04:13:32 【问题描述】:我开始学习 vue,我试着练习一下,但我被 for 循环卡住了。
我正在调用我为更好地理解数据处理而开发的 API。调用的输出是:
[
"_id": "ID1",
"customerID": "ASDF",
"purchases": [
"laptop": "DELL",
"price": "500"
,
"monitor": "DELL",
"price": "200"
]
,
"_id": "ID2",
"customerID": "FDSA",
"purchases": [
"laptop": "MacBook",
"price": "1800"
,
"monitor": "DELL",
"price": "300"
]
]
我的目的是用v-for遍历购买的数组,这样就可以显示json中每个条目的数组内容。
我使用的vue模板是:
<template>
<div>
<div class="card" v-for="data in purchases" :key="data.purchases">
<div class="card-image">
<div class="card-content">
<div class="media">
<div class="media-content">
<p class="title is-4">PURCHASES</p>
<div
class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd"
>
<div class="column">Laptop: data.purchases[0].laptop</div>
<div class="column">Monitor: data.purchases[0].monitor</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
vue 文件中的脚本:
<script>
import ref from "@vue/composition-api";
export default
setup()
const purchases = ref([]);
const API_url = "http://localhost:8383/purchases";
async function getData()
const reponse = await fetch(API_url);
const json = await reponse.json();
purchases.value = json;
console.log(purchases);
getData();
return
purchases,
;
,
;
</script>
我知道我只显示数组的第一个元素,而这正是我的问题,如何使用 v-for 遍历整个数组。
非常感谢您的帮助:)
【问题讨论】:
【参考方案1】:创建另一个嵌套的v-for
以循环遍历data.purchases
:
<template>
<div>
<div class="card" v-for="data in purchases" :key="data.purchases">
<div class="card-image">
<div class="card-content">
<div class="media">
<div class="media-content">
<p class="title is-4">PURCHASES</p>
<div
class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd"
>
<template v-for="purchase in data.purchases">
<div class="column">Laptop: purchase.laptop</div>
<div class="column">Monitor: purchase.monitor</div>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
【讨论】:
以上是关于Vue 使用 v-for 迭代 API 响应的嵌套数组的主要内容,如果未能解决你的问题,请参考以下文章