Resetform Vue

Posted on  by admin
I am working with Vuelidate in Vue3 in Ionic, and I have some problems when resetting the form to default blank values.

I followed this repository to build the form validator using Vue3 and it works well, but it remains the “reset” function. In this issue, the solutions are:.

I have tried these solutions and they dont work. When I trigger the reset method, I set manually each of the fields of the form to null or “” and then, I reset it by using the tricks I showed before.

They dont remove the errors. However, If I reset manually the form in a function and after add I click another button that has a @click=“this.$v.$reset”, it reset correctly.

I would like not to have another button, but in the same reset function, set default values: “” and remove errors.

In another solution the error disappears but the form fields dont reset the value. Thank you in advace. What you need is to set this.text to an empty string in your submitForm function:.

Remember that binding works both ways: The (input) view can update the (string) model, or the model can update the view. Assuming that you have a form that is huge or simply you do not want to reset each form field one by one, you can reset all the fields of the form by iterating through the fields one by one.


For more type info see here. A basic vuejs template and script sample would look as follow.

See ow the @submit.prevent="onSubmit" is used in the form element.

That would by default, prevent the form submission and call the onSubmit function.


Not the answer you're looking for? Browse other questions tagged vue.jsvuex or ask your own question.