Javascript VueJs如何从v-repeat复制对象?
功能允许您添加/删除事件的描述、标题和时间 我无法处理通过v-model=(event.name、event.description和event.date)创建的对象的复制(克隆) 移除选定对象后,所有操作都可以正常进行,其工作原理如下:Javascript VueJs如何从v-repeat复制对象?,javascript,arrays,object,mvvm,vue.js,Javascript,Arrays,Object,Mvvm,Vue.js,功能允许您添加/删除事件的描述、标题和时间 我无法处理通过v-model=(event.name、event.description和event.date)创建的对象的复制(克隆) 移除选定对象后,所有操作都可以正常进行,其工作原理如下: deleteEvent: function(index){ if(confirm('Are you sure?')) { this.events.$remove(index); } } 下面是我为添加和更改事件的应用程序编写的代码示例 va
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) {
}
}
});
有完整的代码吗
通过
此.events[索引]
访问克隆的对象,然后使用其属性创建新对象并将其推入事件
数组:
cloneItem: function(index) {
this.events.push({ name: this.events[index].name,
description: this.events[index].description,
date: this.events[index].date });
}
演示:我发现了与jQuery的extend等效的未记录的内置扩展函数Vue.util.extend 在这种情况下,可以避免枚举对象属性
cloneItem: function(index) {
this.events.push(Vue.util.extend({},this.events[index]));
}
谢谢你,伊万。我发现了一个更优雅的解决方案,在这种情况下不需要枚举对象属性
cloneItem:function(index){this.events.push(Vue.util.extend({},this.events[index]);}
@KirillMonocle:看起来确实更好。虽然“undocumented”听起来可能会在未来的版本中毫无预警地改变它的行为。