[Vuejs]-How to use the key special attribute inside the v-for directive using an array of arrays

by

3👍

✅

As said in the documentation

The key special attribute is primarily used as a hint for Vue’s virtual DOM algorithm to identify vnodes when diffing the new list of nodes against the old list.

It will also be used for

  • Properly trigger lifecycle hooks of a component
  • Trigger transitions

The only requirements is that your keys must not have any duplicates

Children of the same common parent must have unique keys. Duplicate keys will cause render errors.

In general the best way is by adding an unique identifier to the item with for example an id comming from the database

<span v-for="item in FooVar" :key="item.id">

If you don’t have any id, then you can use the index of the item in the list.

Note that this is NOT optimzed and see here why

<span v-for="(item, index) in FooVar" :key="index">
👤RenaudC5

1👍

You can put index:

<span v-for="(item, index) in FooVar" :key="index">
👤Nikola Pavicevic

Leave a comment