Czy Vue.js ma wbudowany sposób dodawania kopii trwałego obiektu do powtarzającej się tablicy

Question

Mam aplikację Vue.js, w której mam powtórzenie v na tablicy elementów. Chcę dodać nowy element do listy elementów. Kiedy próbuję this.items.push(this.newItem) obiekt wciśnięty jest nadal powiązany z wejściem. Rozważmy poniżej:

new Vue({ 
    el: '#demo', 

    data: { 
    items: [ 
     { 
     start: '12:15', 
     end: '13:15', 
     name: 'Whatch Vue.js Laracast', 
     description: 'Watched the Laracast series on Vue.js', 
     tags: ['learning', 'Vue.js', 'Laracast', 'PHP'], 
     note: "Vue.js is really awesome. Thanks Evan You!!!" 
     }, 
     { 
     start: '13:15', 
     end: '13:30', 
     name: "Rubik's Cube", 
     description: "Play with my Rubik's Cube", 
     tags: ['Logic', 'Puzzle', "Rubik's Cube"], 
     note: "Learned a new algorithm." 
     } 
    ], 
    newItem: {start: '', end: '', name: '', description: '', tags: '', note: ''} 
    }, 

    methods: { 
    addItem: function(e) { 
     e.preventDefault(); 

     this.items.push(this.newItem); 
    } 
    } 
}); 

Powyższe, zgodnie z oczekiwaniami, wypchnie obiekt powiązany do tablicy items. Problem polega na tym, że chcę tylko kopię obiektu, aby nie ulegała zmianie po zmianie danych wejściowych. Zobacz tę this fiddle. Wiem, że mogę:

addItem: function(e) { 
    e.preventDefault(); 
    this.items.push({ 
    name:  this.newItem.name, 
    start:  this.newItem.start, 
    end:   this.newItem.end, 
    description: this.newItem.description, 
    tags:  this.newItem.tags, 
    notes:  this.newItem.notes 
    }) 
} 

This works, ale jest dużo powtórzeń.

Pytanie: Czy jest zbudowany tak, aby dodać tylko kopię obiektu zamiast trwałego obiektu.

Answer 1

Zobacz this issue na GitHub. Używałem jQuery's $.extend do Evan You wskazał, że istnieje nieudokumentowana wbudowana funkcja rozszerzenia Vue.util.extend, która jest równoważna rozszerzeniu jQuery z głębokim ustawieniem na true. To, czego użyjesz, to:

addItem: function(e) { 
    e.preventDefault(); 

    this.items.push(Vue.util.extend({}, this.newItem)); 
} 

Zobacz updated Fiddle.

Answer 2

To nie działało dla mnie (vue 1.0.13). Użyłem poniższych, aby utworzyć kopię bez powiązań danych:

this.items.push(JSON.parse(JSON.stringify(newItem)));