Accessing the index variable in a nested v-for loop in vue

Question

I need to access the index variable of a nested v-for loop. Can this be done? My code is

<div v-for="(dayDataArray, key, index) in props_league_data_nfl">
     <div v-for="(arrayItem, key, arrayItemIndex) in dayDataArray" class="col-xs-12 col-sm-4 col-lg-3">



    <!-- some code here -->

<div> {{ props_box_game_scores_nfl[nfl_days[index].split(' ')[0].toLowerCase()][arrayItemIndex] }} </div>`

If I set it up like above with separate names for indexes then arrayItemIndex seems to be ignored. If I use index for both for loops then I get an exception in the nfl_days[index] reference. How can you access the second index variable? It seems like the index name has to be used in both instances? Any suggestions or workarounds appreciated...

Answer 1

For an array v-for only has two arguments, not three. So it should be:

v-for="(arrayItem, arrayItemIndex) in dayDataArray"

It only has 3 arguments when iterating over an object.