Why is an object pushed into the parent array by a reference and how to fix it?

Question

JavaScript

There is a modal.vue component in it, a form with an input and a button handler. As the input fills up, the data is committed to the object:

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

When you click on the button in the form, this object is passed to the parent component using this.$emit and there using the function:

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

is added to the currentEvents array.
The problem is that if, for example, I want to add another event from the form to modal.vue, then:
1. When the modal window is opened, the previous values ​​remain in the inputs
2. As soon as I somehow change the value of any input, automatically the same values change in the newly added currentEvents object.

How can this situation be corrected?

Answer 1

1. Really it is impossible to set empty lines as values ​​at opening of a window in any way? Or not even when re-opening, but immediately, as the values ​​become unnecessary - after the data is transferred to the parent.
As I understand it, inputs and properties of the eventDefault object are connected via v-model. You can make another object - with default values ​​for inputs, and just copy its contents to eventDefault after passing the data to the parent component.
2. Pass a copy of the object to the parent component. You can copy an object like this: . Or like this: . const copy = Object.assign({}, original)const copy = { ...original }