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} } ; }