-
-
Notifications
You must be signed in to change notification settings - Fork 8.2k
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
TransitionGroup: children with same key but rendered in different v-for are not treated as same child #1126
Comments
You can try merge two
Other.I try fix the problem with vue code with packages/runtime-dom/src/components/TransitionGroup.ts#130
It is worked,but it maybe caused hydration error(remove fragment) and add cost of performance with normal code bacause give up the optimized. |
Yep, merging them all into one |
Version
3.0.0-beta.9
Reproduction link
https://codepen.io/21stCenturyJonas/pen/rNOprRG
Steps to reproduce
In the example above (with
items: [{ id: 1, done: false }, ...]
), togglingitem.done
would trigger av-move
transition in Vue 2, as it'd see the item as being the same and just having changed its position, despite moving from onev-for
to the other. Vue 3 treats the item that's removed from the onev-for
and the one that now is a part of the otherv-for
as separate despite the equal key and triggersv-leave
andv-enter
transitions respectively.This breaks the transitions in this ToDo app for example, which works in Vue 2 (https://codepen.io/21stCenturyJonas/pen/QWjpxwG) but doesn't in Vue 3: https://codepen.io/21stCenturyJonas/pen/rNOprRG
What is expected?
Due to the same key, the item is moved instead of being removed only to reappear in its new position.
What is actually happening?
The item is removed from its old position and reappears in its new position.
I guess this happens because they actually aren't direct children of
<TransitionGroup>
anymore but instead there's a<Fragment>
in between?The text was updated successfully, but these errors were encountered: