Template loop gives duplicate keys warning

Question

<template v-for="errors in validationErrors">
    <li v-for="(error, index) in errors" :key="index">{{ error }}</li>
</template>

The above code throws:

Duplicate keys detected: '0'. This may cause an update error

If I remove index from the inner loop and assign error to key then there is no warning, however that just seems wrong.

Any way to not have this warning when using templates?

Answer 1

You could use this instead:

<template v-for="(errors, outerIndex) in validationErrors">
    <li v-for="(error, index) in errors" :key="outerIndex + '-' + index">
        {{ error }}
    </li>
</template>

Explanation

Without unique information from the outer loop, the inner loop key will use the same set every time, so you end up with duplicates. Ex. if you had two outer loops with 3 items each, you'd get this:

<li key="0">...</li>
<li key="1">...</li>
<li key="2">...</li>
<li key="0">...</li>
<li key="1">...</li>
<li key="2">...</li>

By using an outerIndex too, you maintain uniqueness in the inner elements:

<li key="0-0">...</li>
<li key="0-1">...</li>
<li key="0-2">...</li>
<li key="1-0">...</li>
<li key="1-1">...</li>
<li key="1-2">...</li>