Using a two-dimensional array in vue 3 template not working as expected

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:

Vue tools view

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:

Console output

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.

Readout

  • 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.

    – 

Leave a Comment