Vue: Transition-group animates only last element if using index as the key

[megacromulent]

Version

2.5.17

Reproduction link

https://codepen.io/megacromulent/pen/gdMYLx?editors=1010

Steps to reproduce

1. Create vue app with items displaying in a list.
2. Add transition group with v-for with format like v-for="(item, index) in items"
3. Use "index" from v-for as the v-bind:key (like: v-bind:key="index" )
4. Add and remove items from the data.

What is expected?

The item being removed/added should have the transition applied to it.

What is actually happening?

The last item in the list gets the transition applied.

---

This may be an old bug, as I was hunting for a solution to my problem, I ran into this from May 2017:

https://stackoverflow.com/questions/43598308/vue-js-wrong-transition-group-animation-position

If this is the intended behavior using index as the key, then can their be at least a warning message in the dev version of Vue.js to explain this? Or perhaps searchable text in the documentation with something like "only last item in list is animating/transition applied" so a solution can be found without thinking there is a bug in Vue.js.

[posva]

This is expected, the key controls how Vue reuses elements/components and is therefore crucial for transition-group. You can read more about it in the guide 🙂

[megacromulent]

I respect your time, so please understand that I didn't put this bug report up without looking for an answer first, so please be respectful of my time and don't be so dismissive.

I found a new error as well during this search (see example at end).

Search of documentation
I searched the documentation entirely, either this is a bug, or it's undocumented, or it's not documented in a reasonable place. I did a search for index and transition on the guide, and looked through every single instance I could find.

You can read more about it in the guide

I know this is unreasonable (usually) to ask, but I seriously looked through everything, even searching online, and found nothing on this topic.

Can you provide a link to this documentation?

Search results
Index shows up 12 times on the transitions guide. There is no mention of the effects index has on transitions on the transitions section
https://vuejs.org/v2/guide/transitions.html

Index shows up 19 times on list rendering guide, but no mention of transitions.
https://vuejs.org/v2/guide/list.html

Index shows up 7 times on the API docs, none of the reference or are in context of the transition-group or transitions.
https://vuejs.org/v2/api/#transition-group

Updated example with new error found:
I found one example in the cookbook using index in the :key and it fails _worse_ than the other example.
https://vuejs.org/v2/cookbook/serverless-blog.html#Display-posts

Instead of just the last item animating, the entire block fades in/out. (3rd example)
https://codepen.io/megacromulent/pen/wEzWNL

[posva]

Using the index as the key is the default behaviour. If you have propositions about notes to add to the docs, you should open a Pull Request with your proposal on the vuejs.org repository 🙂. Maybe a not on transition-group page is the right place
for the last example, all the keys are changing so Vue is replacing every single li.

Remember you can use the forum and the Discord server to get quick feedback on questions 🙂

[Justineo]

@megacromulent

From Vue's perspective, key is used to identify unique items in a list.

Let me give you an example: assume we have ['a', 'b', 'c', 'd'] and rendered a list out of this array using v-for and keyed the items with their indexes. When you remove 'b' from the list, you are telling Vue that item 1(key) is now 'c', item 2 is now 'd' and item 3 is now removed. As transition occurs when an element/component got added/removed/showed/hide from the view, only the last item will be transitioned out.

[megacromulent]

@Justineo

Thanks for the explanation, that certainly clears up why the errors are happening.

But the results (which look like errors) are not documented anywhere that I could find, and if they are, not easily found.

@posva

...open a Pull Request with your proposal on the vuejs.org repository...

I didn't even consider this idea, so I will do that. I've never done a PR before, so I hope I don't make more of a mess.

Thanks guys.

Edit:

What about the error in the Vuejs.org cookbook?

[davidgolden]

+1 Also experiencing this issue. Switched to different keys and it works. @megacromulent I've also never done a PR and would be interested in collaborating if you want a second pair of eyes.

[megacromulent]

Hey, thanks for the offer. The only thing I would do is put documentation
in, I don't have the JS skills to contribute to a library like Vue.js.
Thanks for the offer though.

On Wed, Oct 3, 2018 at 9:04 AM David Golden [e-mail]
wrote:

+1 Also experiencing this issue. Switched to different keys and it works.
@megacromulent https://github.com/megacromulent I've also never done a
PR and would be interested in collaborating if you want a second pair of
eyes.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue/issues/8718#issuecomment-426647578, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AmYG171vJuPiQV9kv95mPhvyH3hzhOisks5uhMPQgaJpZM4WOkWp
.

[ggaabe]

Was getting this issue as well. I'm creating a dynamic list where every new item added is blank and so there are multiple duplicates. Tried using the item as the key but get a warning not to use non-primitives. The v-move transition works on creation but not deletion of items.

[NE-SmallTown]

The pr https://github.com/vuejs/vue/pull/8748 doesn't give any explaination which seems not reasonable. The problem is that the key rule/problem appears everywhere, not just <transition-group>, we should just give a warning rather than error because in some situations we will not change the order of the array/list. Just throw error like now is opinionated

[Rabbitzzc]

+1. This needs to be represented by a unique key. At the same time, when the data changes, can you ensure that the key is still unique after re-rendering.