VueJs How to duplicate object from v-repeat?

Question

Functionality allows you to add/delete description, title and time for the event.

I can not deal with the duplication(cloning) of the object which is created through v-model = (event.name, event.description and event.date)

All works fine with the removing selected object, it works like this:

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

Here's an example of my code for a application to adding and changing events.

 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) {

    }

  }
});

there full code http://codepen.io/Monocle/pen/ojLYGx

Kirill Monocle · Accepted Answer · 2015-09-23 11:40:29Z

1

I found undocumented built it extend function Vue.util.extend that is equivalent to jQuery's extend.

In this case, you can avoid the enumerating the object properties

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

answered Sep 23, 2015 at 11:40

Kirill Monocle

776 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ivan Jovović · Accepted Answer · 2015-09-23 10:23:13Z

0

Access the cloned object via this.events[index], and then use it's properties to create new object and push it into events array:

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

Demo: http://codepen.io/anon/pen/MajKZO

answered Sep 23, 2015 at 10:23

Ivan Jovović

5,3185 gold badges34 silver badges57 bronze badges

2 Comments

Kirill Monocle Over a year ago

Thank you @Ivan. I found a little more elegant solution, in this case do not need enumerate the object properties. cloneItem: function(index) { this.events.push(Vue.util.extend({},this.events[index])); }

Ivan Jovović Over a year ago

@KirillMonocle: Looks better indeed. Although 'undocumented' sounds like it could change it's behavior in future releases without warning.

Collectives™ on Stack Overflow

VueJs How to duplicate object from v-repeat?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related