Este es mi formulario y quiero borrar los valores después de enviar el formulario,
<form @submit.prevent="addNewUser" ref="newUserForm"> <script setup> import { ref } from "vue"; //Reference to new user form const newUserForm = ref(); //New user form const userForm = reactive({ id: "", name: "", email: "", telephone: "", address: "", }); const addNewUser = async () => { ... newUserForm.reset(); } </script>Esta es la forma en que lo intenté, pero esto no está funcionando. ¿Estoy haciendo algo mal aquí? Realmente aprecio tu ayuda. Gracias
De alguna manera este trabajo se volvió tan repetitivo para mí que hice un composable.
/** Usage: const { form: storeForm, reset: storeFormReset } = useForm({ name: null, position: null, content: null }) */ export default initialState => { const form = reactive({ ...initialState }) function reset () { for (const key in initialState) { if (Object.hasOwnProperty.call(initialState, key)) { form[key] = initialState[key] } } } return { form, reset } }Esto me ayudó mucho. Espero que esto le ayude también. En tu caso, puedes usarlo así:
const { form: userForm, reset: userFormReset } = initialState({ id: "", name: "", email: "", telephone: "", address: "", }); const addNewUser = async () => { ... userFormReset(); }Advertencia: este componible solo funciona si el objeto es poco profundo (como lo menciona @EstusFlask). Siéntase libre de hacer cambios en el componible para adaptarlo a su gusto.
Esto se hace de una manera genérica que no es específica de los formularios.
Dado que el conjunto de datos inicial debe existir para ser asignado en algún momento, puede haber una función de fábrica que lo proporcione:
const getInitialFormData = ({ id: "", ... }); const userForm = reactive(getInitialFormData()); const resetUserForm = () => Object.assign(userForm, getInitialFormData()); De esta forma, se garantiza que el estado se restablecerá incluso si el objeto userForm se anida en algún momento.
Esto depende de su configuración. No has mostrado cómo manejas los datos del formulario. ¿Es un modelo vue reactivo? En caso afirmativo, debe establecer las propiedades del modelo en sus valores predeterminados dentro de la función "addNewUser" y el formulario se borrará. Tenga en cuenta que este es un enfoque preferible.
Alternativamente [NO PROBADO], puede colocar una entrada invisible de type="reset" y llamar a la función de clic en ese botón.