Vue: Component's data not reset inside a v-for

[arthurmaurer]

Vue.js version

2.0.2

Reproduction Link

https://jsfiddle.net/ycm7x4o9/

Description

Hello guys!
I have a problem so stupid that I doubt this is a bug, but my researches led to nothing.
I have a v-for on a component. The problem is that when I update the array used by the v-for, everything's alright except the data of the component keeps its values. Also, "created" is not called. Like if the components were sort of "recycled".

Is this a bug or am I using it wrong?

Thanks!

[apulley]

@arthurmaurer : This is a perfect question for the gitter chatroom. They would have fixed up your fiddle in no time. :smile:

• created is only called when a component is instantiated, not when the data changes.
• When you increment the value with the click event, it's only updating the value scoped inside the component. So when you update the data in the list, it doesn't update the data scoped within the component.
• I've updated your fiddle below to what I think you're trying accomplish, follow up here and close the issue if this gets you close to solving your issue. Good luck!

https://jsfiddle.net/n4ecaf6r/

[arthurmaurer]

Thanks for gitter, I didn't know this!
The solution you gave works fine, but it's only a way around and it would be a pain to use this everytime I face this problem.
So when the v-for refreshes, it only changes the data and does nothing else ? If so, how could I notify the data change (aside watching it) ?

[danieldiekmeier]

The components actually do get recycled. You can use the updated lifecycle hook to listen for changes to the data: https://jsfiddle.net/8zujdy8y/

You could also watch for changes on your item prop.

If the data doesn't change, the component won't be updated or rerendered. This is very much on purpose and part the optimizations that make Vue so fast.

[fnlctrl]

As explained by @danieldiekmeier and @arthurmaurer 😄

[tomcastleman]

I came across this issue which had me really stumped initially. My props and local data state were getting mixed up between list item components, especially when filtering or refreshing the list. My searching lead me to this issue thread and then I eventually stumbled across this page of the docs.

The issue is caused by the default “in-place patch” strategy Vue2.0 uses when updating a v-for list of components. The docs linked above explain it really well but essentially:

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 behaviour for performance gains.

I hope this helps someone else who may come across this issue.