Vue: Directives break when replacing an item in array using splice

[samgre]

Vue.js version

2.0.1

Reproduction Link

http://jsfiddle.net/5sH6A/723/

Steps to Reproduce

Click "remove" next to "2".

Expected Result

The page should've rendered without Vue.js throwing an error.

More Info

I'm working on a small app, which has a two-level hierarchy of items. If an item contains subitems, it is rendered as a group and the contained items are rendered recursively. Thus, a group and an item result into different HTML being rendered (and different directives in the elements).

Now, if I replace a group with an item using splice, the virtual dom doesn't notice that the HTML element changed (with its directives), but tries to update the items directives with group's.

[LinusBorg]

Hi @samgre,

thanks for your report!

I had a look, and it seems adding a key to the topmost v-for seems to make it work:

http://jsfiddle.net/Linusborg/5sH6A/725/

Docs: https://vuejs.org/guide/list.html#key

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.

But I think this may nonetheless be considered a bug. /ping @yyx990803

[samgre]

Thanks for the fast reply! I somehow missed key attribute, when learning Vue and v-for has worked so nicely without it.

After submitting the issue, I noticed that you can also work around the bug just by changing the element name of either of the v-ifs in the reproduction example.