Cuando uso la función montada en vue para asignar dos objetos diferentes en el área de datos y vincular uno de ellos a un formulario, aparece un problema extraño: ambos objetos cambian con la entrada de valores en el formulario
Ejemplo:
<template> <v-card> <v-form> <v-text-field v-model="newProduct.name" ></v-text-field> <v-text-field v-model="newProduct.price.net" ></v-text-field> </v-form> </v-card> </template> <script> export default { data() { return { originalProduct: {} newProduct:{} } }, mounted () { const productFromApi = { name: 'test' price: { net:20 } } this.originalProduct = productFromApi this.newProduct = productFromApi } } </script> En este ejemplo, el producto originalProduct también cambia cuando se edita el formulario.
Cuando asigno los objetos con Object.assign , solo el price del objeto en línea cambia con el objeto newProduct
No quiero que se cambie el originalProduct
¿Alguien tiene una solución para esto?
Debe hacer una copia profunda del objeto si desea aislar completamente los cambios:
this.newProduct = JSON.parse(JSON.stringify(productFromApi))Cuando realiza las asignaciones, otorga a originalProduct y newProduct una referencia al objeto productFromApi. Entonces, cuando modifique productFromApi, ambos reflejarán los cambios.
Intenta clonar los objetos de esta manera:
this.originalProduct = {...productFromApi}