Persistent bindings with objects added to repeater array

When you add an object to a v-repeat array that has bindings attached to it, the bindings persist. Is this intentional?

Very crude and simplified version of my problem, after adding an item delete some of the text from the input box:

http://jsfiddle.net/FyrY6/2/

I noticed when the object was added to the array it inherited the new bindings and methods from the v-repeat directive (which is awesome), but did not remove its old bindings. Is there a way to destroy the old bindings of an object after it has been added to a repeater array?

edit: updated fiddle link

[yyx990803]

It should not remove the bindings because you are pushing the note object into the array by reference, and that object is still observed by the main ViewModel.

What you should do is push a shallow copy of the note object:

this.notes.unshift({
    content: this.note.content,
    clicked: false
})

@yyx990803 Thanks!

[dutgriff]

Darn. I was really hoping to find a built in way to push a copy of the whole object. In my case

this.items.push(this.newItem)

breaks down to

this.items.push({
    name:        this.newItem.name,
    start:       this.newItem.start,
    end:         this.newItem.end,
    description: this.newItem.description,
    tag:         this.newItem.tag,
    notes:       this.newItem.notes
})

That is a lot of pointless repetition. Instead I am using jQuery's $.extend since I already have it:

this.items.push($.extend({}, this.newItem)); //use $.extend(true, {}, this.newItem) for deep

[yyx990803]

There is an internal equivalent: Vue.util.extend, although it's not documented.

[dutgriff]

Awesome. This is what I was looking for. I created a StackOverflow Q and A to hopefully help out others that run into this. http://stackoverflow.com/questions/30578254 It includes fiddles that show a before and after: http://jsfiddle.net/huLygoag , http://jsfiddle.net/huLygoag/1 , http://jsfiddle.net/huLygoag/2

Hi,

I have a situation where I have the following object

data : {
            navigation : {
                step : {
                    prev : 0,
                    current : 1,
                    next : 2
                },

                phase : {
                    prev : 0,
                    current : 1,
                    next : 2
                },

                next_type : 'phase',

                can : {
                    prev : false,
                    next : false
                }
            },

            history : []
        },

but using javascript Vue.util.extend( {}, this.navigation ) maintains the data binding. Thus if I say this.navigation.phase.current = 5 it will also update the object pushed in this.history which I am trying to avoid.

Can anyone advise if am doing something wrong or if it is an actual bug to the util.export?

I played around with the fiddle above and forked into a new version where I could replicate my issue http://jsfiddle.net/5kxrwuag/. Right now my only option seems to be this.history.push( { navigation : { phase : Vue.util.extend ( this.navigation.phase ), ... for each properties

[yyx990803]

@jjaulimsing Vue.util.extend only does a shallow clone - it only copies the top level properties. Vue.js data objects are reactive by reference, so if you want a non-reactive copy, use a deep clone. The easy way is JSON.parse(JSON.stringify(object)), or use something like https://lodash.com/docs#cloneDeep

[idhamhafidz]

It was real troublesome to find a solution for this. Is it possible to add notes about this in the documentation, my suggestion is in the section just below example with todo list in List Rendering