0
157
Viewsdifference between v-for structures
Could someone explain what is the difference between those 2 v-for structures:
<li v-for="item in items" :key="item">
</li>and
<li v-for="(item, i) in items" :key="i">
</li>2 answers
Answer question0
In the first case, the v-for iterates over all elements of items. It assigns the :key to the item itself. This is not ideal if you have duplicate elements in items, because each :key should be unique.
In the second case, v-for also iterates over all elements of items, but it introduces another variable named i, which represents the numerical index of the item in items. This index is then assigned to :key. This is better, because the indexes can't be duplicate.
0
As the purpose of :key attribute is to give a hint for Vue virtual DOM algorithm about change detection happen. Essentially, it helps Vue identify what's changed and what hasn't.
To understand it better I am adding the uses of both the scenarios :
:key="item"- If item is having unique value. So that each iterated element will get assigned with unique key.
:key="index"- If item is not having unique value. Hence, to assigned unique key to each iterated element we are usingindex.