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

Is dayDataArray an object or an array?

skirtle
– skirtle

2019-10-02 18:11:40 +00:00
Commented Oct 2, 2019 at 18:11 — skirtle
– skirtle, Commented Oct 2, 2019 at 18:11
dayDataArray is an array.

Alan
– Alan

2019-10-02 18:13:03 +00:00
Commented Oct 2, 2019 at 18:13 — Alan
– Alan, Commented Oct 2, 2019 at 18:13

skirtle · Accepted Answer · 2019-10-02 18:14:27Z

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.

answered Oct 2, 2019 at 18:14

skirtle

29.3k4 gold badges49 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alan Over a year ago

Thank you. My bad. I should have rtfm rather then copying from previous line.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related