2015-09-22 1 views
1

Функциональность позволяет добавлять/удалять описание, название и время события.VueJs Как дублировать объект из v-repeat?

Я не могу справиться с дублированием (клонирование) объекта, который создается с помощью клиновых модели = (event.name, event.description и event.date)

Все отлично работает с удалением выбранного объекта , он работает следующим образом:

deleteEvent: function(index){ 
    if(confirm('Are you sure?')) { 
    this.events.$remove(index); 
    } 
} 

Вот пример моего кода для приложения для добавления и изменения событий.

var vm = new Vue({ 
    el: '#events', 

    data:{ 
    event: { name:'', description:'', date:'' }, 
    events: [] 
    }, 

    ready: function(){ 
    this.fetchEvents(); 
    }, 

    methods: { 
    fetchEvents: function() { 
     var events = [ 
     { 
      id: 1, 
      name: 'TIFF', 
      description: 'Toronto International Film Festival', 
      date: '2015-09-10' 
     }, 
     { 
      id: 2, 
      name: 'The Martian Premiere', 
      description: 'The Martian comes to theatres.', 
      date: '2015-10-02' 
     }, 
     { 
      id: 3, 
      name: 'SXSW', 
      description: 'Music, film and interactive festival in Austin, TX.', 
      date: '2016-03-11' 
     } 
     ]; 

     this.$set('events', events); 
    }, 

    addEvent: function() { 
     if(this.event.name) { 
     this.events.push(this.event); 
     this.event = { name: '', description: '', date: '' }; 
     } 
    }, 

    deleteEvent($index)" 
    deleteEvent: function(index){ 
     if(confirm('Вы точно хотите удалить данную запись?')) { 
     this.events.$%remove(index); 
     } 
    }, 
    cloneItem: function(index) { 

    } 

    } 
}); 

есть полный код http://codepen.io/Monocle/pen/ojLYGx

ответ

1

Я нашел недокументированную встроенную функцию расширения Vue.util.exten d, что эквивалентно расширению jQuery.

В этом случае вы можете избежать перечисления свойств объекта

cloneItem: function(index) { 
    this.events.push(Vue.util.extend({},this.events[index])); 
} 
0

Доступ клонированный объект с помощью this.events[index], а затем использовать его свойства для создания нового объекта и вставьте его в events массив:

cloneItem: function(index) { 
    this.events.push({ name: this.events[index].name, 
         description: this.events[index].description, 
         date: this.events[index].date });  
} 

Демо: http://codepen.io/anon/pen/MajKZO

+0

благодарю вас @Ivan. Я нашел немного более элегантное решение, в этом случае не нужно перечислять свойства объекта. 'cloneItem: function (index) {this.events.push (Vue.util.extend ({}, this.events [index])); } ' –

+0

@KirillMonocle: Выглядит лучше. Хотя «недокументированный» звучит так, как будто он может изменить свое поведение в будущих выпусках без предупреждения. –