Имеет ли Vue.js встроенный способ добавления копии постоянного объекта в повторяющийся массив
У меня есть приложение Vue.js, где у меня есть v-repeat в массиве элементов. Я хочу добавить newItem в список элементов. Когда я пытаюсь this.items.push(this.newItem)
, объект, нажатый, все еще привязан к входу. Рассмотрим ниже:
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 Cube",
description: "Play with my Rubik Cube",
tags: ['Logic', 'Puzzle', "Rubik Cube"],
note: "Learned a new algorithm."
}
],
newItem: {start: '', end: '', name: '', description: '', tags: '', note: ''}
},
methods: {
addItem: function(e) {
e.preventDefault();
this.items.push(this.newItem);
}
}
});
Вышеуказанное будет, как и ожидалось, нажать объект, привязанный к массиву элементов. Проблема в том, что я хочу только копию объекта, чтобы он больше не менялся при изменении ввода. Смотрите эту эту скрипту. Я знаю, что могу:
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
})
}
Это работает, но много повторений.
Вопрос: Есть ли встроенный способ добавления только копии объекта вместо постоянного объекта.
Ответы
Ответ 1
Смотрите эту проблему на GitHub. Я использовал jQuery $.extend
, пока Evan You не указал, что существует недокументированная встроенная функция расширения Vue.util.extend
, которая эквивалентна расширению jQuery с глубоким значением true. Итак, что вы будете использовать:
addItem: function(e) {
e.preventDefault();
this.items.push(Vue.util.extend({}, this.newItem));
}
Смотрите обновленный скрипт.
Ответ 2
Это не сработало для меня (vue 1.0.13). Для создания копии без привязки данных я использовал следующее:
this.items.push( JSON.parse( JSON.stringify( newItem ) ) );