I am trying to use a two-dimensional array in a vue 3 template but I cant seem to access the array properly. I have this array structure shown here from Vue tools:
My html template code is:
<template v-for="divsn in afc">
<!-- eslint-disable-next-line vue/require-v-for-key -->
<div>{{ divsn }}</div>
<!-- eslint-disable-next-line vue/require-v-for-key -->
<table v-for="team in divsn">
<thead>
<tr>
/* Table Header Info */
<th>GB</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" colspan="2">
<img :src="team.team.logo" />{{ team.team.name }}
</th>
<td>{{ team.won }}</td>
<td>{{ team.lost }}</td>
<td v-if="team.ties">{{ team.ties }}</td>
<td>{{ (parseInt(team.won + (.5 * (team.ties))) / (parseInt(team.won) + parseInt(team.lost +
parseInt(team.ties))) * 100).toFixed(1) }}%</td>
</tr>
</tbody>
</table>
</template>
JS to create array:
// ============================================================================= //
// =============== Computed values for team standings by Division ============== //
// ============================================================================= //
const afcEastStandings = computed(() => {
return nflStandings.value.response.filter((team) => team.division === "AFC East");
})
/* more computed properties */
// ============================================================================= //
// =============== End of Computed values for team standings by Division ======= //
// ============================================================================= //
const afc = ref([afcEastStandings, afcNorthStandings, afcSouthStandings, afcWestStandings]);
;
When I run this code I get error in console:
I have tried all different permutations and still I cant get the array to print in the template. Any set of new eyes that perhaps see what I’m doing wrong much appreciated…
Update: Here’s a snap shot of divsn print out. When I try printing {{ team }} </> in 2nd v-for I get nothing.
Are you saying team.won does work when you remove team.team? If not, your data is probably not fetched when you render you HTML. However this is a wild guess as I don’t know how your data is fetched.
Off topic: you can edit your eslint to always ignore the key check in a v-for. Seems more logic then exclude each one that doesn’t has it.
If I comment out team.team line no more error but table elements are empty and <div>{{ divsn }}</div> prints to screen . I know data is not ready on initial render but because vars are reactive they should fill table on data load. yes? I know I’ve done this sort of thing before.
Ah, the most simple approach is to wrap your HTML with a wrapper containing a v-if=”team”. This will only render when team is fetched so it prevents accessing team.team before it is loaded.