Estoy usando la API de composición de Vue3 e intenté restablecer el formulario con la ayuda de Object.assign. Desafortunadamente, no restablece el formulario cuando hay propiedades anidadas.
const initialForm = { name: "", details: { type: "" } }; const form = reactive({ ...initialForm }); const resetForm = () => { Object.assign(form, initialForm); }
Aquí se restablece el nombre, pero no se restablecen detalles.tipo. ¿Cuál debería ser el enfoque para restablecer el formulario aquí?
operador de propagación ...
y Object.assign
hacen copias superficiales SOLAMENTE.
lo que significa que no cambia las referencias anidadas. por lo tanto, details.type
de initialForm
es el mismo que se usa en form.details.type
.
para eso, necesita copiar/clonar en profundidad el objeto al asignarlo al form
. también cuando haces el resetForm
.
usando https://lodash.com/docs/4.17.15#cloneDeep
const initialForm = { name: "", details: { type: "" } }; let form = reactive( _.cloneDeep(initialForm)); const resetForm = () => { form = _.cloneDeep(initialForm) ; }
sin paquete externo:
const initialForm = { name: "", details: { type: "" } }; let form = {...initialForm, details : {...initialForm.details} } ; const resetForm = () => { form = {...initialForm, details : {...initialForm.details} } ; }