Getting undefined while access index parameter while iterating over objects in vue.js

Question

Please refer below code. Here I am using v-for to iterate over the object.

In this I am trying to access index parameter but I am getting it blank.

<a href="#" class="list-group-item" v-for="(event, key, index) in events">
    index is {{index}}
</a>

I also tried below way but got the same result:

<a href="#" class="list-group-item" v-for="event in events">
    index is {{$index}}
</a>

This is my object:

var events = [{
            name: 'event1',
            description: 'description 1',
        },
        {
            name: 'event2',
            description: 'description 2',
        }
    ];

Can anybody please help me out with this. How can I access index property here.

Thanks in advance.

events is type of array.. In which I am storing objects...Please refer the updated question — Rohit Waghela
– Rohit Waghela, Commented May 31, 2017 at 7:44

tony19 · Accepted Answer · 2022-07-16 02:50:50Z

1

v-for also supports an optional second argument for the index of the current item

And there is no third argument. So you should write like this

<a href="#" class="list-group-item" v-for="(event, index) in events">
    index is {{index}}
</a>

edited Jul 16, 2022 at 2:50

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 31, 2017 at 7:56

Kirill Matrosov

6,0404 gold badges30 silver badges39 bronze badges

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

Comments

Conrad Lotz · Accepted Answer · 2017-05-31 07:57:32Z

0

It is possible that your events object's json formatting. Try the following:

You JSON string also seems to be incorrect. The field description should be quoted as well as the answers. remove the comma after the description data

 [{
            "name": "event1",
            "description": "description 1"
        },
        {
            "name": "event2",
            "description": "description 2"
        }
    ]

In some cases due to the JSON formatting you might have an object containing an array:

<a href="#" class="list-group-item" v-for="(event, key, index) in events.**events**"> //events can be .data or events[0]
    index is {{index}}
</a>

DEMO

edited May 31, 2017 at 7:57

answered May 31, 2017 at 7:50

Conrad Lotz

8,9533 gold badges25 silver badges28 bronze badges

1 Comment

Conrad Lotz Over a year ago

great! try and use this tool to validate your JSON - makes life a lot easier... jsonformatter.curiousconcept.com

Collectives™ on Stack Overflow

Getting undefined while access index parameter while iterating over objects in vue.js

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related