Vue: Elements unnecessarily re-created when an above v-for changes.

[gazugafan]

Version

2.3.2

Reproduction link

https://jsfiddle.net/gazugafan/a8kverza/2/

Steps to reproduce

Change the inputs marked "Change Me", then add a row. Any inputs following the v-for rows get re-created (and lose their value), while inputs above remain as they are. This only seems to happen when the inputs and v-for element are contained in a parent component's slot.

What is expected?

All inputs remain unchanged--regardless of what happens to the sibling v-for element.

What is actually happening?

Any input elements following the v-for are re-created--resetting their value.

[simplesmiler]

I'm not entirely sure, but this looks like a bug to me, because this only happens with the slot content.
In the mean time, key-ing the element in question helps: https://jsfiddle.net/a8kverza/3/

[nerdcave]

I just ran into something similar. Although in my example, a v-if on a nested slot causes a sibling component to be recreated: https://jsfiddle.net/y0vgrwjy/1/

Probably related?

[pengchongfu]

@nerdcave , I think it is related. the reason is what I describe in PR.

you will find it works well if you change slot content position like this

[nerdcave]

@pengchongfu, Also works if you add a key to <my-data>. Thanks for looking into it.

[pengchongfu]

@nerdcave ,you can also add a wrapper like this, the wrapper would be a placeholder so that the default key of input will not changed.