[Vuejs]-How to increment a loop in Vue

by

2👍

✅

Just loop over the others, really you want to start from teams as that’s the way the JSON is structured

Example using various parts of the JSON, view the file for others.

<div v-for="team in hockeyDataList.teams" :key="team.id">
  <h1>{{ team.name }}</h1>
  <div>{{ team.venue.name }}, {{ team.venue.city }}</div>
  <div>Created in: {{ team.firstYearOfPlay }}</div>
  <div>Division: {{ team.division.name }} - Conference: {{ team.conference.name }}</div>

  <h2>Roster</h2>
  <div v-for="player in team.roster.roster" :key="team.id + '-' + player.person.id">
    <h3>{{ player.person.fullName }}</h3>
    <div>
      Number: {{ player.jerseyNumber }} - Position: {{ player.position.name }} {{ player.position.type }}
    </div>
  </div>
</div>

2👍

<div v-for="team in hockeyDataList.teams" :key="team.id" >
 <p v-for="roster in team.roster.roster :key="roster.id">
   {{ roster.person.fullName }}
 </p>
</div>

It’s not necessary, but if you want to, you can get index in a v-for as well:

<div v-for="(team, index) in hockeyDataList.teams" :key="team.id" >
 <p>
   {{ hockeyDataList.teams[index].roster.roster[1].person.fullName }}
 </p>
</div>

1👍

v-for increments the index automatically for you. The problem is that the api returns a json and not an array we can iterate on. By looking at the api response, we can see that teams is the array we can iterate on.

<v-for="(team, i) in hockeyDataList.teams" :key="i">

where index automatically increments until the end of list. We can then iterate through the roster.

<v-for="(roster, j) in team.roster.roster" :key="j">

Putting it all together

<div v-for="(team, i) in hockeyDataList.teams" :key="i">
  <div v-for="(roster, j) in team.roster.roster" :key="j">
    <p>{{ hockeyDataList.teams[i].roster.roster[j].person.fullName }}</p>
  </div>
</div>

Leave a comment