Question

18

How to unbind an array copy in Vue.js

rated 0 times [ 21] [ 3] / answers: 1 / hits: 20995 / 9 Years ago, fri, july 10, 2015, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

laytonlamontm

Add To Favorites

Follow

Total Points: 745

Total Questions: 130

Total Answers: 130

Location: Cambodia

Member since Thu, Oct 7, 2021

3 Years ago

answered 9 Years ago jaden · Accepted Answer

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.