Subscribe on changes!

Transition Group with v-for element with ref: clunky removal

avatar
Apr 27th 2023

Vue version

v3.2.47 and beta version

Link to minimal reproduction

https://play.vuejs.org/#eNrVVttu4zYQ/ZWBFkWUxJLsZJMCqmOkL20XaNGi7UOL1T7QEmWrlkhBopx4jfx7D0ndfGmKbYEFNjEgcXjmwpkzQ+2db8vS3zbcCZ15HVdZqajmqikXkciKUlaK9lTxlF4orWRBF4Be9Fu/4ZnzH7Natbt+MIi01QH6XSM2uwNkL2mBRJGIpQBixdU7kamM5e8UL2p6IPeSHhb0fjahmwndTujthO4+dPCsBSFM90jVvbyMRM6BSQAwQH/L8ob7ORcrtaZrmkUiEmkjYpVJQZmoeaXgbq8Dau1D9Sem1n4lG5G49pWJRBbAXZ2xCp90IK7LPIu5m01oOkEo19dAvBz4rTiy3rkdqcL1yZGOdet1k6Y5P689WulNIr9gpaulOqPu3uyEBjahGpUK27O2B3zRGTR6etN12YSWphjMCMijpXkxqEgZ63rNkfCFMcgT6/7ym9NDF3KLtMD3ScLH6ctEwp9/Ti3QHDElN6MFebNW75/SPTNweMVvHlh+g9lYAF7mTHGsiObLRikE9BhDcfMQOZYGkbOwL8QU2YSAIIhlHliF88qmltA1z9ehbekAbt8O4UPThOZ8OjL9jBzaenUuFQR7c3Sc0TE6kZon2da86r99t40EWMmZcIcqwMgffQi6IY1G0FmcD02L9TwYJTESzsSxve6BA/5ftRSYKaY6iNpsIO6wq1fkoOv1OnLWSpV1GASNKDcrP5ZF8Ii9oGqEygruIeuPt/6N//ZrxFGrsdzndeEtK/mEIsFj5ExGxgMIt7zyKo6SVbx61dkR9sDh0d6J045iSMDBTPuUkYreGOafqbEpux1qunP0bsLTTPBfKlnW7nstujBIzM4P4Plr/EYBKc5ZXT9c5LB70fJj/sOsZ8qvmgaZWLXjNM71UcKOAT1w/jsaocY4kuJ7zMOSBCs4WJSyRNO4Z5n2uPVSWbWcReNYy+CujcTKsQw3fDescOCO5joFI5vW6mgJgW4C2xyDhaBn7iF7j1fz4OgsLcd7tn961upCSrX+/Fn7jDmyegPmZA7Ma7XLLe98nbau45+yBKmhm7tp+WwITZTmkuHCyXmqjARdhJYUioHmldUrpXUeghhwkW25QZYsSZD2kKbdreKbfBmd1tNsOv3KgNc8W63h57bzvGTxZmVucy+WuaxCepPe6n+7Kys0OvTLZ1xgOT4d3tzf37dbz16dfTSeLcyDqAshuKKZTwlHpSpOqk8cXQWIT9fa06MWQ8ouuFAwwHAZjoQ5Z1veCu1xBkMhsTynqX+H/myWWewt+ceMVy4kd+bbYurjE2nW37QI6GYIyLizMwd3GbIOR6Qk1QqlG8Vow9K4o6CANQHJksWZ2tnkt/GBs0VIdcxy/ifimeJmNnJNC1cnHsGN47r1EU/dICxte+ggkzm24YJko0imlLOdfgNVnlANUmvcxbbnOr4yjFUwA6OTYiZoyfHI40Z7TvBFUVU8VvnOH53wNMcDzdgSNW+Uppn9aDBsxmw//LI9M9z/83iGRLXt9j8HAG7/M92+gG9I+5b+99b9cruwL9jL3xTDSQc=

Steps to reproduce

Click one of the crosses in the playground example. On the left, the list jumps. On the right, it slides smoothly. The difference is the ref="refsList" on the left list.

What is expected?

It should always go smoothly

What is actually happening?

It doesn't go smoothly if there is a refslist.

System Info

Tried Brave, Firefox, Chrome. OS: Ubuntu linux 22.04

Any additional comments?

No response

avatar
May 2nd 2023

use shallowRef instead of ref see