How to deal with v-for in vuejs when element has no id?

Question

I often get this error related to the v-for directive.

Elements in iteration expect to have v-bind:key directive

When using a for loop like this.

<div v-for='person in people'> {{ person.name }} </div>

The problem is, in sometimes in rare cases, I have no id key for person. And I want to know what can be done in this case.

Add index value to the key if there is no ID – Ghanshyam Singh Oct 04 '17 at 12:32 — Ghanshyam Singh, Oct 04 '17 at 12:32
Yes like that and add index to the key – Ghanshyam Singh Oct 04 '17 at 12:38 — Ghanshyam Singh, Oct 04 '17 at 12:38

Kyle Holmberg · Accepted Answer · 2018-03-14T22:22:41.287

25

As Ghanshyam already mentioned in comments, you can easily generate an index in v-for.

<div v-for="(person, index) in people" :key="index" >
    {{ person.name }}
</div>

edited Mar 14 '18 at 22:22

answered Oct 04 '17 at 21:34

Kyle Holmberg

1 Answers1