[Vue warn]: Duplicate keys detected: x. This may cause an update error
Same key for different v-for
loops causing this warning. You can avoid this using different key for different v-for
loops.
<div v-for="(item, i) in items" :key="i"></div>
<div v-for="(item, i) in items2" :key="'A'+ i"></div>
<div v-for="(item, i) in items3" :key="'B' + i"></div>
Here, A
and B
are just sample characters. You can basically use any character instead of those (just for uniqueness).
An alternative method:
Nesting the v-for
elements inside any other element also seems to work.
<div>
<div v-for="(item, index) in items" :key="index"></div>
</div>
<div>
<div v-for="(item, index) in items2" :key="index"></div>
</div>