[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>

Tags:

Vuejs2