[Vuejs]-How do I use a vue.js nested for loop over two arrays with a v-for

by

1👍

Vue uses key property to differ between components and prevent unnecessary rendering. So from your code :key="i", Vue understands that all sui-table-cell with key i are the same. That’s why you’ve got repeats. You should provide unique keys to avoid this.

This code would do, however I would not recommend to use index as a key and provide some better keying strategy.

<sui-table-row v-for="(player, i) in allPlayers" :key="i">
      <sui-table-cell>{{i+1}}</sui-table-cell>
      <sui-table-cell>{{ player.player1 }}&{{player.player2}}</sui-table-cell>
      <div v-for="(schedule,j) in schedules" :key="j">
        <sui-table-cell v-for="(number, i) in weeks" :key="`${j}_${i}`">
          {{schedules[j][i]}}
        </sui-table-cell>
      </div>
</sui-table-row>

Sample data: 

{
    schedules: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],[2,3,4,5,6,7,8,9,1]]
    weeks: [1/1,1/7,1/14,1/21,1/28,2/5,2/12,2/19,2/25,3/3]
}

The solution with template, will not really work, because template part is never rendered, it is used when you want to use v-for, for multiple internal elements such as:

<template v-for="...">
 <h1></h1>
 <p></p>
</template>
👤Alex Brohshtut

Leave a comment