Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error: v-for index as key on <transition-group> children

See original GitHub issue

Version

2.5.21

Reproduction link

https://jsfiddle.net/edugodsinmetr/p1fdze9y/

Steps to reproduce

Using v-for index as key on <transition-group>

What is expected?

No error

What is actually happening?

Error “Do not use v-for index as key on <transition-group> children, this is the same as not using keys.”

I think I had no errors with this implementation before. My workaround to this issue was to add a number to the index value :key="i+1" but I’m not sure if I should do it.

Issue Analytics

State:
Created 5 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

11reactions

yyx990803commented, Dec 17, 2018

When using index as key on a <transition-group>, your list will never have any moving animation when the list is reordered. That defeats the purpose of using the <transition-group>… even if your code happens to work, you still should provide a unique key because it will break when your list is reordered.

5reactions

oduvancommented, Feb 18, 2020

@yyx990803 the actual confusion here is that with having a key attr I see a warning

Do not use v-for index as key on <transition-group> children, this is the same as not using keys.

And without key attribute it doesn’t work.

Maybe we should remove a warning then?

Thank you