'Duplicate keys detected: ...' error with same keyed children inside a v-fored template

[mathieumure]

Version

2.5.13

Reproduction link

https://jsfiddle.net/56zfwbe5/1/

Steps to reproduce

• Open the jsfiddle demo
• Open your console
• Run the demo
• now you should see an error like this: [Vue warn]: Duplicate keys detected:

What is expected?

Children inside a repeated <template> should share the same keys as they should both re-render if the target element changes.

What is actually happening?

Errors are raised with the message : [Vue warn]: Duplicate keys detected is raised.

---

Cause

This behavior is linked to this PR and was also references in this issue

Workaround

You could avoid this error by adding some prefix / suffix

<template v-for="it in items">
    <li :key="it.id + '-label'">{{it.label}}</li>
    <li :key="it.id + '-separator'" class="separator">&gt;</li>
</template>

[posva]

Unfortunately, this is expected, both elements being at the same level (under ul) you're telling Vue they're the same. As you said, you need to add a suffix or prefix to let Vue treat them differently
You may think it was working pre 2.5.10 because there was no warning but it was not always working, the warning was simply missing

[mathieumure]

Thanks for the quick reply 👏

It makes perfectly sense (now that I know <template> is not considered as an anonymous component by Vue) but I think a word on template and key in the doc could help others, especially when the doc said that <template> "serves as an invisible wrapper." 😄

[posva]

Contributions to docs are always welcome but I think invisible wrapper is accurate and if you try to use key on template you also get an error, so, to me it looks we are covered but ofc open a PR on the docs if you found some case not covered 🙂

[rccoder]

@posva Thx to Reply. It is a hard to find mistake

[KyleMit]

Borrowing from the solution here Duplicate keys detected: { key }. This may cause an update error,

You can include the index as part of your v-for directive and then make a composite key including that:

<div v-for="(item, i) in items"
     :key="`${i}-${item.id}`"></div>

[YeisonTapia]

Hello, this is the solution I found while finding a better way, or the core of vue solves it:

<component 
	:key="index+10"
	v-for="(item, index) in items">
</component>

The key must unique, therefore in larger arrangements a more complex mathematical operation can be done and thus prevent the keys from duplicating.

[posva]

Using a number could be problematic and still show collisions, using a string as the comment above shows is the most secure way. I'm locking this issue as it was resolved and solutions are still very visible :)