Subscribe on changes!

list rendering fails if element is added using array.splice()

avatar
Sep 4th 2021

Version

3.2.8

Reproduction link

codesandbox.io

Steps to reproduce

In the codesandbox.io example click on 'add'

What is expected?

0 2 1

should be rendered

What is actually happening?

0 1 1

is rendered


If I don't use an additional component to render the element, but use 'div' instead it works correctly.

avatar
Sep 4th 2021

that's because you're not keying the list elements, and also don't react to the props change of the element prop (you initially copy it to localIndex, subsequent props changes will stay without effect).

https://v3.vuejs.org/guide/list.html#maintaining-state