CODEWITHSUNDEEP
javascriptvue.jsvuejs2v-for
jukenduit
jukenduit

Reputation: 393

Template loop gives duplicate keys warning

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

Upvotes: 1

Views: 225

Answers (1)

Dan
Dan

Reputation: 63099

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>

Upvotes: 2

Related Questions