Vue vor loop index as click function argument

Question

I want to use the index of a v-for loop as the argument for a click handler, but this returns undefined?

<div v-for="(item, key, index) in groups" v-on:click="selected(index)">{{item.name}}</div>

Handler

selected(i) {
    console.log("you clicked " + i)  // this logs "you clicked undefined"
}

Bert · Accepted Answer · 2017-10-08 17:29:23Z

3

Looks like you are using the syntax for objects not arrays. Change your v-for to:

<div v-for="(item, index) in groups" v-on:click="selected(index)">{{item.name}}</div>

answered Oct 8, 2017 at 17:29

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

1 Comment

Thanks I didn't realise there was a difference... :)