VueJs 如何从 v-repeat 复制 object？

Question

功能允许您add/delete活动的描述、标题和时间。

我无法处理通过 v-model = (event.name、event.description 和 event.date 创建的 object 的复制（克隆） )

删除所选 object 一切正常，它的工作方式如下：

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

Answer 1

通过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

Answer 2

我发现未记录的内置扩展函数 Vue.util.extend 等同于 jQuery 的扩展。

在这种情况下，您可以避免枚举对象属性

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

VueJs 如何从 v-repeat 复制 object？

VueJs How to duplicate object from v-repeat?

javascript

arrays

object

mvvm

vue.js