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

[edum18]

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

[yyx990803]

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.

[sylvainpolletvillard]

Is it also true when using v-for on an object ? I can't think of a reason why object keys wouldn't be valid as a key,

related issue: https://github.com/vuejs/eslint-plugin-vue/issues/726

[callmehui]

As a noob, I come accross the problem just now;
change the code from
' v-for="(item, index) in datas" :key="index" '
to
' v-for="item in datas" :key="item.attrInDatas" '
, it works.

you should not use an array or an object as the key, an non-primitive attribute is needed.

[suncihai]

I came across a problem that if I change :key="item.attributes(non-primitive)", the animation turns to be strange, the entering elements suddenly move. Does anyone meet this problem?

[posva]

it's described just below your comment 😉

[oduvan]

@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

[Kapcash]

Using an object in a v-for may cause this warning if you want to use the value + key in your iteration loop parameters.

<transition-group name="fade">
   <li v-for="(str, objKey) in obj" :key="objKey">
     - {{ objKey }}: {{ str }}
  </li>
</transition-group>

Complete example : https://jsfiddle.net/Kapcash/r2gyz87k/2/

I found out that specifying a third parameter as the index will remove the warning as so:

<li v-for="(str, objKey, index) in obj" :key="objKey">