I'm starting to learn vue, I was trying to practice a little bit and i got stuck with the for-loops.
I'm making a call to an api I've developed to understand better the data handling. The output of the call is:
[
{
"_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"
}
]
}
]
The purpose I have is to use v-for to go through the array of purchases, so that it can display the contents of the array for each entry in the json.
The vue template I'm using is:
<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>
Script in the vue file:
<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>
I know I'm only showing the first element of the array and that's precisely my question, how can I go through the whole array with the v-for.
I would very much appreciate the help :)
Create another nested v-for
to loop through 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.