This is my form and I want to clear the values after submitting the form,
<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>
This is the way I tried, but this is not working. Am I doing anything wrong here? Really appreciate your help. Thanks
Somehow this work became so repetitive to me so I made a 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
}
}
This helped me big time. Hope this helps you too. In your case, you can use it like this:
const {
form: userForm,
reset: userFormReset
} = initialState({
id: "",
name: "",
email: "",
telephone: "",
address: "",
});
const addNewUser = async () => {
...
userFormReset();
}
Warning: This composable works only if the object is shallow (as mentioned by @EstusFlask). Feel free to make changes in the composable to suit your taste
This is done in a generic way that isn't specific to forms.
Since initial dataset should exist in order to be assigned at some point, there may be factory function that provides it:
const getInitialFormData = ({ id: "", ... });
const userForm = reactive(getInitialFormData());
const resetUserForm = () => Object.assign(userForm, getInitialFormData());
This way the state is guaranteed to reset even if userForm object becomes nested at some point.
This depends on your setup. You haven't shown how you deal with the form data. Is it a reactive vue model? If yes - you should set the properties of the model to their default values within the "addNewUser" function and the form will clear. Note that this is a preferable approach.
Alternatively [NOT TESTED], you can place an invisible input of type="reset" and call the click function on that button.