Avoid databinding on nested arrays - vue.js

Question

I'm getting headache avoiding databinding on nested arrays. Let's say i have 2 objects:

Items, array of all items
Item, a single item object

I use

Object.assign({}, object)

to avoid databinding, bit this only works for non-nested array fields. Example:

data: {
    items: [
        {
        name: 'Pencil case',
        contents: [
            {title: "Red Pencil"}, {title: "Blue Pencil"}
            ]
        }, 
      {
        name: 'Rubber container',
        contents: [
            {title: "Yellow Rubber"}, {title: "Green Rubber"}
            ]
        },
    ],

    selected_item: {
      name: 'Pencil case',
      contents: [
        {title: "Red Pencil"}, {title: "Blue Pencil"}
      ]
    }
},
mounted() {
  this.selected_item = Object.assign({}, this.items[0]);
}

There's no databinding on name, but there is still binding on contents.title for example. I absolutely need to assign the object absolutely without databinding.

Here's a JSFIDDLE. In the first input binding on "title" is real, while in the second input there are no binding on "name" as expected. I can't get over it, help me please.

Possible duplicate of [How to deep merge instead of shallow merge?](https://stackoverflow.com/questions/27936772/how-to-deep-merge-instead-of-shallow-merge) — Phiter, Feb 28 '18 at 11:14
If you have jQuery, you can use `$.extend(true, {}, yourObject);`. The first parameter tells it to deep merge instead of shallow merge. — Phiter, Feb 28 '18 at 11:16

Avoid databinding on nested arrays - vue.js

0 Answers0