Vue.js, kalıcı bir nesnenin bir kopyasını tekrarlanan bir diziye eklemek için yerleşik bir yol var mı?

Question

Bir öğeler dizisinde v tekrarladığım bir Vue.js uygulamasına sahibim. Öğelerin listesine yeni bir öğe eklemek istiyorum. this.items.push(this.newItem)'u denediğimde, itilen nesne yine de girişe bağlanır. Aşağıdaki düşünün:

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

yukarıdaki irade, beklendiği gibi, ürün dizisi üzerine bağlı olduğu nesneyi itin. Sorun sadece nesnenin bir kopyasını istiyorum, bu yüzden giriş değiştiğinde artık değişmeyecek. Bu this fiddle'a bakın.

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 ama tekrarı bir sürü: Ben yapabileceğini biliyorum.

Soru: Kalıcı nesne yerine nesnenin yalnızca bir kopyasını eklemek için yerleşik bir yol var mı?

Answer 1

GitHub'da this issue konusuna bakın. JQuery'nin Evan You işaretini numaralı belgeye kadar kullanmış olmasından ötürü, belgesiz bir şekilde, jQuery'nin derin set ile true değerine uzandığı, Vue.util.extend işlevini genişletir. Yani ne kullanacaktır:

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

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

updated Fiddle bakınız.

Answer 2

Bu benim için çalışmadı (sürüm 1.0.13). Veri bağlamaları olmadan bir kopya oluşturmak için aşağıdakileri kullandım:

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