Subscribe on changes!

the div which has the ref attribute inside the v-for, when I v-if toggle them, the ref value.length increase more and more

:lady_beetle: bug has workaround
avatar
hisland
Sep 18th 2023

Vue version

3.2.47

Link to minimal reproduction

https://play.vuejs.org/#eNqtVUtv00AQ/iuDOSSV0qSot9QttNADSDxEERfMwbUnzjab3dU+3ESR/zuz68R2nNIglR6a3Z1v5pu3N9G1UuPSYTSNYpNppiwYtE4BT0VxmUTWJNFVIthSSW1hAxpnI/qXZpaVOAIpPksnLOYjyORSuXB6TG02hwpmWi5hQMYHjYH3BLrZCsaTcPPsBEhEJoWxwMxPZtg9R7j0ZEOrHZ4kYuYEUUoBVhYFxy1meAKbRECrNC5T7rzqq95TIqqWg+x+YOUdE2RpSyMc50TTyL1rTwH2TVxrvRX/+t3X7sniSZ1eSmZscal4apHOAHHOSjB2zZHSfS91jnoKb9QKjOQsh9eIeAEqzXPyhgRnahUqAvTnVa+6wUxhE0rURldV8cSj9hXa6HYanXh7KnMNk0M+im7MURR23uFsH5/hPdTcfz3G3zYIabeXtzBYoxnAFAZCDvpG7p211DzvMs6yhW/rbhdRPvfu8aSGk3LLC+Upm5Fmw5hETdXmyIq59cWh6lzAYRGV0yrw1PYATEj17hbsUyLIVLd4HTxh6tFpUG3BCBbXo9TA92Lv1eFlgTCx6LiVap2u96IoT2dSk6VhWZ6NgIkcV2cn9AvnRDNd4Nozh1e6d0OmBjgab435t2B3p3jSmbY4BAomkwrz3YrjaPySowH1QkJFI1p7NMszVowfjBS0G8OWSSK/4xhH/VX5XURa1MI1cRKlnMvHT+HN76zR7j2bY7Z44v3B0CBP6fBNo0FdUh0amU11gbYW3959wRWdG+FS5s5X7Rnhd6RyOe9jDbtxIie3O7jg7cewlKmJfpjblUVhdkF5Rz2yCvgkohXtc/630Ft3z8fnQY/WLWWx2e//7+vS+6wkosEM6WNweQWb6uiyzXhqDLE/6lT52UdjX9It1R+VZ24c

Steps to reproduce

if I click toggleVisible many times,

  1. the refDivSingle toggle between null and div
  2. the refCompSingle toggle between null and {}
  3. the refDivArr.length increase more and more <-- error here
  4. the refCompArr.length toggle between 3 and 0

if I use ref function, it don't get null image

What is expected?

the refDivArr.length should toggle between 3 and 0, same as the refCompArr.length

What is actually happening?

the refDivArr.length increase more and more

System Info

No response

Any additional comments?

No response

avatar
edison1105
Sep 19th 2023

a workaround:

<div v-for="(vv0, index0) in 3" :key="index0" ref="refDivArr">
+<div v-for="(vv0, index0) in 3" ref="refDivArr">
    <CompB ref="refCompArr"></CompB>
</div>
avatar
hisland
Sep 20th 2023

If I use ref function, it can not get null, when bind to DIV @Alfred-Skyblue @edison1105

reproduce link here: https://play.vuejs.org/#eNqtVM2O0zAQfpUhHNJKoS3qLZsWWFgkkPgRIE65uMk09da1LdtJW0V5d8ZJk7YLLAe2h8ae+eabf9fBG60nVYlBHCQ2M1w7sOhKDYLJYpEGzqbBMpV8p5VxUIPBdUR/LHO8wgiU/KRK6TCPIFM7XbanPXPZBhpYG7WDkMjDgeAtgW5Pism0vXnvBEhlpqR1wO1PbvlKICy8s5EzJY5TuS4luVQSnCoKgSfMaAx1KuFsNKmYKL3psweiVDbex0BD1O/lO16NUMTA5HHc8vgQFJkIVYzCHhJGgIJCIIJrcx/+v+w95oIgmXZFppImDndaMId0BkhyXoF1R4FU9JUyOZoYXuoDEB/P4Tki3oBmec5lQYqZPrR9Afp50+W5bHV9UcNXEB7RhhBDKFUITZNMPfpkuCqdo2ReZ4JnW9/sy9oS/9U9mXZwMj77heoFX5Pl4DENhiw2yIuN88FStDfwe1Kay+2QBQAzhh37y4l8rQwxjapqFgGXOR5mY/rCnNxATAUmZd8mEg1UZN9N2hXIi8hf0s3dAL4qyXDuT8n0ok9JmxvYTGnM+xURaP2SUGu9klBBRGtDo7DmxeTeKkm71U5HGvgd4QLNF+2niKzibn69jgmh9h9bmZ/5qJdnG8y2f5DfWxqBmA5fDVo0FZV+0DlmCnSd+u77ZzzQeVDuVF76Rj2i/IbUodLH2MFuS5lT2Be4NtoP7VLTRP6wdweH0vZJ+UA9smnxaUAr7mv+t9TP4c4n89aOloWqOLwPT/c6PXiWUjlgRvSYLJZQN7Spj69pJpi15H1vmJ8nh9b9z7Q0vwBmNtrm

image

avatar
Alfred-Skyblue
Sep 20th 2023

Fixed in #9240 @hisland

GitHub Track