Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

template inside transition-group children keying #5152

Closed
terenzif opened this issue Dec 22, 2021 · 1 comment
Closed

template inside transition-group children keying #5152

terenzif opened this issue Dec 22, 2021 · 1 comment

Comments

@terenzif
Copy link

Version

3.2.26

Reproduction link

sfc.vuejs.org/

Steps to reproduce

Create [transition-group tag="div"]
Put inside a [template v-for="..." ] with required :key
Put inside [template] a [div]
Put inside [template] an iterating [div v-for="..."] with required :key

What is expected?

This should work without warnings

What is actually happening?

It gets the warning:
[TransitionGroup] children must be keyed.


Porting a Vue2 component i found the problem dealing with a [template v-for] inside a [transition-group].
The cause is the different key management: [template] don't want keys on its children (they have to be moved inside [template] tag) but [transition-group] still want every children to be keyed.
The result as you can see, is that you receive a warning
[TransitionGroup] children must be keyed.

But if I try to put keys on [transition-group] children (which are actually children of [template]) you get a compile error:
SyntaxError: [template v-for] key should be placed on the [template] tag

@posva
Copy link
Member

posva commented Dec 26, 2021

Duplicate of #4718

@posva posva marked this as a duplicate of #4718 Dec 26, 2021
@posva posva closed this as completed Dec 26, 2021
@github-actions github-actions bot locked and limited conversation to collaborators Oct 6, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants