Почему в родительский массив объект пушается ссылкой и как это исправить?

Question

[Gregory]

Есть компонент modal.vue в нем форма с input и кнопка обработчик. По мере заполнения input данные фиксируются в объект:

eventDefault: {
  date: ' ',
  time: ' ',
  title: ' ',
  desc: ' '
}

При нажатии на кнопку в форме этот объект с помощью this.$emit передается в родительский компонент и там с помощью функции:

pushEventToCalendar(eventDefault){
	this.currentEvents.push(eventDefault)
}

добавляется в массив currentEvents.

Проблема в том, что если я например хочу добавить еще одно событие из формы в modal.vue, то:
1. При открытии модального окна в инпутах остаются предыдущие значения.
2. Стоит мне хоть как-то изменить значение любого инпута, автоматически эти же значения меняются в только что добавленном в currentEvents объекте.

Как можно исправить данную ситуацию?

Answer 1

[0xD34F]

1. Неужели никак нельзя при открытии окна задать input'ам в качестве значений пустые строки? Или даже не при повторном открытии, а сразу же, как значения станут не нужны - после передачи данных родителю.

Я так понимаю, input'ы и свойства объекта eventDefault связаны через v-model. Можно сделать ещё один объект - с дефолтными значениями для input'ов, и просто копировать его содержимое в eventDefault после передачи данных в родительский компонент.

2. Передавайте в родительский компонент копию объекта. Копировать объект можно так, например: const copy = Object.assign({}, original). Или так: const copy = { ...original }.

Comments

[Gregory]

0xD34F, спасибо за дополнение и развернутый и ответ. Буду пробовать, судя по описанию должно помочь :)