v-for not reusing existing elements

[ereveniaud]

Version

2.7.14

Reproduction link

codepen.io

Steps to reproduce

• Focus an input in the list
• Scroll up, the input still has the focus (row reused)
• Scroll down, the input loose the focus (row rendered)

What is expected?

Elements should not be re-rendered when scrolling down (same behavior as scroll up)

What is actually happening?

When scrolling up, only new elements are rendered.
When scrolling up, all elements are rendered

---

Work as expected in Vue 3 (codepen: https://codepen.io/thel-rico/pen/mdjqVZJ)

[v-bilyavskiy]

unfortunately, this is also a problem for me
@ereveniaud maybe you found a workaround?

[LeiDeMing]

This is because when scrolling down, vue updates the child nodes by comparing the first one with the next one, so each vnode will be updated.

[klmhyeonwoo]

👀