I am attempting to populate a table with data fetched from my API using three for loops.
const events = await app.$axios.get('/api/events/')
const markets = await app.$axios.get('/api/markets/')
const runners = await app.$axios.get('/api/runners/')
The challenge I face is ensuring that the indexing of table rows is based on "runners" because there will be more runners than markets, and markets will have more rows than events.
Here's how I envision it:
Event Market
Runner
Runner
Runner
Market
Runner
Runner
However, when I attempt to use multiple for loops in the same Vue file, I encounter the following error.
duplicate attribute key
I am puzzled as to why this error occurs when using "id" in separate loops. My query is: How can I populate the table based on the runner index for each row?
Below is the code snippet I have worked on so far.
<template>
<div class="course-list-row">
<th style="width:5%"> Start date </th>
<th style="width:5%"> Event name</th>
<th scope="col">Market</th>
<th scope="col">Runner</th>
<tr v-for="(event, index) in events" :key=id
v-for="(market, index) in markets" :key=id
v-for="(runner, index) in runners" :key=id>
<td>{{ event.start_time }} </td>
<td>{{ event.event_name }} </td>
<td>{{ market.name }} </td>
<td>{{ runner.name }} </td>
<td />
</tr>
</div>
</template>
<script>
export default {
async asyncData({
app
}) {
try {
const events = await app.$axios.get('/api/events/')
const markets = await app.$axios.get('/api/markets/')
const runners = await app.$axios.get('/api/runners/')
return {
events: events.data.results,
markets: markets.data.results,
runners: runners.data.results,
error: false
}
} catch (e) {
console.log('error', e)
return {
events: [],
markets: [],
runners: [],
error: true
}
}
},
};
</script>
<style>
th,
td {
font-family: ‘Lato’, sans-serif;
font-size: 12px;
font-weight: 400;
padding: 10px;
text-align: left;
width: 0%;
border-bottom: 1px solid black;
}
</style>
The responses from the API include unique IDs for reference, as shown below.
/api/events
{
"count": 80,
"next": null,
"previous": null,
"results": [{
"id": 103,
"sport_id": "9",
"event_name": "Guilherme Clezar vs Uladzimir Ignatik",
"start_date": "12-11-19",
"status": "open",
"event_id": 1273804660340017
}]
}
/api/markets
{
"count": 128,
"next": "http://localhost:8000/api/markets/?page=2",
"previous": null,
"results": [{
"id": 151,
"market_id": 1273804670840017,
"market_name": "Moneyline",
"status": "open",
"volume": 1107.5453,
"event": 103
}]
}