Transferring information from the parent to the child component has always been easy for me. However, I recently encountered an issue where updating the data in the child component also updates the data in the parent component simultaneously. Now, I am looking for a way to prevent this from happening.
Within the parent component, there is a child component embedded like this:
<address-dialog v-if="dialog.address.status" :countries="countries" :address-data="dialog.address.data"
:open="dialog.address.status" @close="dialog.address.status = !dialog.address.status"></address-dialog>
In the child component, I pass the props as they are and then initialize them using the data method.
props: {
open: {
type: Boolean,
default: false
},
addressData: {
type: Object,
default: null
},
countries: {
type: Array,
default: null
}
},
data() {
return {
mdiClose,
loading: false,
valid: false,
dialog: this.open,
address: this.addressData,
cities: [],
states: [],
overlay: false,
snackbar: {
status: false,
text: '',
color: '#FF5252'
},
rules: {
required: value => !!value || 'Required.',
},
}
},
Whenever I update the address in the child component, it automatically updates the address in the parent component. How can I prevent this automatic updating?