Within the parent component, I initially have an empty filter object like this: {}.
The child component, called filter component, is a child of the parent component and here's how it is implemented:
<filter-component :filters.sync="filters" />{}).
Inside the filter-component, there is a method that looks like this:
filter(group, filter) {
const filters = this.filters;
// perform some actions to modify the filter
// filters[group].push(filter);
this.$emit('update:filters', Object.assign({}, filters));
}
As you can see, the child component is modifying the prop (not directly referencing it due to push in the nested one), but still altering it.
How can I resolve this issue?
The only solution that comes to mind is changing the line where I have const filters = this.filters so that instead of assigning, it performs a deep copy. This way, every time the filter changes from filter-component, it will emit a completely new one and avoid any modifications.
Shallow copying doesn't seem to work in this scenario. Are there any other solutions besides deep copying? I prefer not to use the lodash package at all.