0👍
In short, you need a key.
When Vue is updating a list of elements rendered with
v-for
, it by
default uses an “in-place patch” strategy. If the order of the data
items has changed, instead of moving the DOM elements to match the
order of the items, Vue will simply patch each element in-place and
make sure it reflects what should be rendered at that particular
index. This is similar to the behavior oftrack-by="$index"
in Vue
1.x.
This default mode is efficient, but only suitable when your list render output does not rely on child component state or temporary DOM
state (e.g. form input values).
[…]
It is recommended to provide a key with v-for whenever possible, unless the iterated DOM content is simple, or you are intentionally relying on the default behavior for performance gains.
This is a fairly common "gotcha" which should be helped by the fact that
In 2.2.0+, when using
v-for
with a component, akey
is now required.