How to unbind an array copy in Vue.js

Question

I am trying to copy one array to another and use this like the new array without any changes to old one:

<div id="app">
    <div class="form-group">
       <label>Test input</label>
       <input v-model="testArray[0].name" type="text" class="form-control" placeholder="Input">
    </div>
    <br>
    <pre>testArray: {{ testArray[0] | json}}</pre>
    <pre>templateArray: {{ templateArray[0] | json  }}</pre>

new Vue({
  el: '#app',
  data: {
      testArray: [],
      templateArray: [{name: "TEST"},], 
  },
  ready: function() {
      this.testArray = this.templateArray.slice(0);
    },
});

the issue is that then I am updating new array 'testArray' I also change old array 'templateArray'.

The script in action: https://jsfiddle.net/4po1cpkp/7/

Is there any way to create new array based on array template without directly binding it to template?

Andrey · Accepted Answer · 2015-07-10 17:51:44Z

24

As Vue.js documentation says:

Under the hood, Vue.js attaches a hidden property __ob__ and recursively converts the object’s enumerable properties into getters and setters to enable dependency collection. Properties with keys that starts with $ or _ are skipped.

You can store your template array with name started from underscore sign:

  data: {
      testArray: [],
      _templateArray: [{ name: "TEST" }]
  },
  ready: function() {
      this.testArray = this.$data._templateArray;
  }

Or you if need it as a Vue.js object:

this.testArray = JSON.parse(JSON.stringify(this.templateArray));

The second case might be slow for big data.

answered Jul 10, 2015 at 17:51

Andrey

1,55312 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nisal Gunawardana · Accepted Answer · 2017-10-14 06:16:31Z

0

I used Vue extend function Vue.util.extend to copy array with un-binding in Vue 2:

this.items_list.push(Vue.util.extend({}, this.list_item));

answered Oct 14, 2017 at 6:16

Nisal Gunawardana

1,46518 silver badges22 bronze badges

Comments

Ismail Omar · Accepted Answer · 2023-08-20 08:02:13Z

OPTION 1

You should assign data to testArray by using JavaScript concat() function to copy old array to new array like this one, use this if you work with small array data:

this.testArray = [].concat(this.templateArray);

OPTION 2

You can use ES6 spread operator to merge multiple array like this:

this.testArray = [...[],...this.templateArray]

OPTION 3 ( For big data )

const MAX_BLOCK_SIZE = 65535; // max parameter array size for use in Webkit
export function appendArrayInPlace(dest: [], source: []) {
    let offset = 0;
    let itemsLeft = source.length;

    if (itemsLeft <= MAX_BLOCK_SIZE) {
        dest.push.apply(dest, source);
    } else {
        while (itemsLeft > 0) {
            const pushCount = Math.min(MAX_BLOCK_SIZE, itemsLeft);
            const subSource = source.slice(offset, offset + pushCount);
            dest.push.apply(dest, subSource);
            itemsLeft -= pushCount;
            offset += pushCount;
        }
    }
    return dest;
}

OPTION 3 CREDIT TO enter link description here

tunnes · Accepted Answer · 2018-03-20 13:00:52Z

-2

You can use slice() of array prototype read more in MDN Array.prototype.slice()

this.testArray = [].slice.call(this.templateArray)

answered Mar 20, 2018 at 13:00

tunnes

11 bronze badge

2 Comments

rinu Over a year ago

this.testArray = this.templateArray.slice() seems to do the exact same thing.

Gustavo Straube Over a year ago

If it's the same as slice() it doesn't work for what the OP asked. It'll continue to be deeply attached to the original array, as mentioned in the question.

Collectives™ on Stack Overflow

How to unbind an array copy in Vue.js

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related