Pasar datos de padres a hijos es pan comido y nunca tuve el problema de que cuando actualizas los datos de los elementos secundarios también se actualizan los datos de los padres al mismo tiempo, aunque ahora quiero evitar eso.
Tengo este componente secundario dentro del componente principal.
<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>Dentro del componente secundario, paso los accesorios tal como están y luego los configuro con el método de datos.
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.', }, } }, Al actualizar la address dentro del componente secundario, también actualiza automáticamente la dirección en el componente principal, ¿cómo puedo evitarlo?
Porque tienen la misma referencia (ya que la dirección es un objeto).
Una solución es pasar un nuevo objeto que tenga las propiedades addressData por operador de extensión.
address: { ...this.addressData }Debe definir las propiedades de datos vinculadas a los accesorios como calculadas:
computed:{ address(){ return this.addressData }, dialog(){ return this.open; } }