Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

problem with v-repeat and remove all #213

Closed
ljonathanl opened this issue Mar 30, 2014 · 2 comments
Closed

problem with v-repeat and remove all #213

ljonathanl opened this issue Mar 30, 2014 · 2 comments
Labels

Comments

@ljonathanl
Copy link

Hi,

I have found a problem with v-repeat when you remove all items of a list and set a value of a removed item during the same frame. Item will reappear in the list and linked view too.

You can see this fiddle for a real example : http://jsfiddle.net/4JGRy/

The "newValue" should not be visible because all items of the list have been removed.

NB: I really appreciate this library, good job ;)

Edit: replace gist by a fidlle

@jcaxmacher
Copy link

@ljonathanl I think this is the intended behavior. When you assign items as part of the ViewModel's data, it is converted to an object that intercepts the array methods and getters/setters for objects. So, by keeping a reference to an item from the list, you keep the ability to insert a value back into. Two questions for you- what would you expect to happen instead? what is the use case for keeping references to list items around when the list has been purged?

If you use loop.items = []; to empty the array (instead of splice), then you will have a truly new array in the ViewModel and the old reference will not affect it.

@ljonathanl
Copy link
Author

Thank you for the answer but I do not agree with you, data (or model) does not belong only to a Vue, see my update of the fiddle: http://jsfiddle.net/4JGRy/1/
The Item has been created and added after to the list, the list has been purged but the Item can be modified after by another Vue for example or by business part.
Secondly I think it is a bug because if you modify the Item after a frame (waiting for Vue.nextTick for example), the list will be kept empty: the good behavior.

And empty array is not a solution because data (or model) does not belong only to a Vue.
For example:

var model = {items: [1,2,3]};
var list = new Vue({data: {items: model.items}});

if I set list.items with an empty array I lost my reference with the model.

@yyx990803 yyx990803 added the bug label Apr 3, 2014
yyx990803 pushed a commit that referenced this issue Apr 25, 2014
The auto-sync back when an identifier is used causes issues
such as #213 and #234, while the feature is a rarely used
edge case that is also a bit magical. It can be easily circumvented
by using object arrays instead of primitive ones, and the sync-back
is better left in userland for those who really need it.

For reference, Angular also doesn't support sync back for primitive values.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants