Как отвязать, копию массива в Vue.js

Question

Я пытаюсь скопировать один массив в другой и использовать это как новый массив без каких-либо изменений в старой:

<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); 
    }, 
}); 

проблема в том, что тогда я обновляю новый массив «testArray». Я также изменяю старый массив «templateArray».

Сценарий в действии: https://jsfiddle.net/4po1cpkp/7/

Есть ли способ, чтобы создать новый массив, основанный на шаблоне массива без непосредственного связывания его в шаблон?

Answer 1

Как Vue.js документация говорит:

Под капотом Vue.js придает скрытое свойство __ob__ и рекурсивно преобразующий перечислимых свойств объекта Into добытчиками и сеттеры, чтобы включить сбор зависимостей. Свойства с ключами, которые начинаются с $ или _, пропускаются.

Вы можете хранить массив шаблон с именем начинается с подчеркивания знака:

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

Или вам, если это необходимо в качестве объекта Vue.js:

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

Второй случай может быть медленный для больших данных.

Answer 2

Я использовал Вью расширить функции Vue.util.extend, чтобы скопировать массив с ип-связывание в Vue 2:

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