Vue: Strange DOM behaviour

[inanimatt]

Preface: I've read the docs and _think_ I've done the right thing (i.e. proper one-way flow, passing data in as props and emitting events properly when the content changes), but I might be doing something really dumb. Please accept my apologies if so… it's really super not clear to me what's going wrong here.

Vue.js version

2.0.2

Reproduction Link

• Visit http://jsfiddle.net/5sH6A/783/

  Steps to reproduce

• Swap blocks around using the up/down arrows, note how everything is fine.

• Add a new block, and set its content (e.g. "4").
• Add a second new block. Notice that its content is a copy of the previous block, but its data is correctly blank.
• Move the top block down one, notice it renders correctly empty.
• Move it back up. Once again the data looks fine, but the DOM displays the content from the previous block (e.g. "4")
• Set some content on the top block (e.g. "5"), then move it down. The top two blocks display "5" (but the data is ok). Move the 2nd block back up and everything looks fine.
  

  What is Expected?

See description above.

What is actually happening?

Top block displays a copy of the second block, despite having correct data.

[simplesmiler]

Hello! Thanks for filing an issue.

What's happening is that you are relying on tracking by index, which is unsuitable for your case. This is described in the key documentation. You should give your items identifiers so that Vue can track them properly, something like this: http://jsfiddle.net/5sH6A/785/ (but I'd recommend to use a dedicated id generating library to avoid collisions).

Closing, as this is not an bug.

[fnlctrl]

The strange thing about this is that the problem persists when no key is applied at all:
http://jsfiddle.net/b2096r9c/
So I thought it was a auto-keying bug..
edit: Actually it may be a dom patching bug..

[simplesmiler]

I believe no-key just applies the equivalent of :key="index" implicitly.

[fnlctrl]

@simplesmiler I didn't know about this behavior (I thought no-key just means no key applied at all), would you kindly provide a source reference?

[simplesmiler]

When Vue.js is updating a list of elements rendered with v-for, it by default uses an “in-place patch” strategy. ... This is similar to the behavior of track-by="$index" in Vue 1.x.

This is what I interpreted as implicit key by index. I may be wrong in this assumption, as I'm still on the surface level of understanding 2.0 mechanics. But I remember tracking by index causing the same exact issue in 1.0.

[simplesmiler]

In fact I just tried to reproduce the 1.0 default (tracking by reference) in 2.0, and it appears to behave as expected: http://jsfiddle.net/simplesmiler/5sH6A/786/
I don't know if this is a valid use of :key though.

[inanimatt]

Oh my god I love you. 8 hours I've cried over this bug. If this fixes it, I will buy you several pints.