[Vuejs]-Does it make sense to put the array element index as key on Vue v-for element?

0👍

If you Item is an object with an id prop then it would be best to use that.

In small scale applications where you are sure your data has no chance of duplication i would use a name or id prop from the object mixed with the index e.g

<div v-for="(item, index) in items" :key="`${item.id}-${index}`">

or

<div v-for="(item, index) in items" :key="`${item.name}-${index}`">

0👍

Using index as a key is an anti-pattern

What happens if you push an item to the list or remove something in
the middle? If the key is same as before [Vue] assumes that the DOM
element represents the same component as before. But that is no longer
true.

Leave a comment