Dev build console error when using index in :key value with v-for and transitions

[megacromulent]

What problem does this feature solve?

Currently there is no obvious way to debug an error when including the index value in v-bind:key with v-for when using transitions. This causes erratic and unexpected behavior from transitions (and I would suspect other side effects, but these are untested).

This feature would alert the developer that they have used index value in a place where it will cause errors with transitions.

Example error:

This example should illustrate how difficult it is to determine why the v-for combined with transition-group fails.

In the example below there are 3 uses of v-for with :key. (1) one works fine, it doesn't include index in the :key value. (2) uses index as the key (ie, v-bind:key="index"). (3) uses a concatenated version (v-bind:key="item '_' index"

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

Note: this behavior was thought to be a bug because of lack of documentation on this behavior ( #8718 ) and having a console log entry would have solved the confusion instantly during development, instead of hours of debugging and reporting.

What does the proposed API look like?

Check to see if the index value is used anywhere in :key, and then check if a transition is being used, if so, then display console error, or at least a warning.

The proposal is for the dev builds only, so no additions/expansions to the API are needed for the production builds.

[posva]

This is not possible because sometimes you may want to use the index as the key.
I really think you should open a PR to the docs to add a note in transition-group as I said in the other issue 🙂

[megacromulent]

You would never want to use index as the key with a transition because it causes an error. I demonstrated that.

Is there something wrong with my example showing this error?

[posva]

Yeah, you are right. I don't think it makes sense to use the index in any scenario for transition-group. I'm not sure this is an easy to add warning though

[megacromulent]

If I get to a point where I have more free time, I'd at least look through the code to be able to add this kind of thing.

Perhaps a dev only object that tracks features being used during a render (ie, transition is used) then when an index is found (ie, in the template render?) it would be tracked as well, and then conflicts could be found between features used.

I know it's easy to say this kind of thing, and a whole other thing to actually build it. But I am not a high level dev, so I can only theorize...

[RANGELJ]

In dev branch this issue is solved, why is still open?

[posva]

It wasn't correctly reference I the commit message of the PR #8748