197
rated 0 times
[
199]
[
2]
/ answers: 1 / hits: 59696
/ 9 Years ago, mon, june 1, 2015, 12:00:00
I have a Vue.js app where I have a v-repeat on an array of items. I want to add a newItem to the list of items. When I try this.items.push(this.newItem) the object pushed is still bound to the input. Consider the below:
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);
}
}
});
The above will, as expected, push the object that is bound onto the items array. The problem is I want just a copy of the object so it will no longer change when the input changes. See this this fiddle. I know I can do:
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 but is a lot of repetition.
The question: Is there a built in way to add just a copy of the object instead of the persistent object.
More From » vue.js
