How can I clear form values after successful submit in vuejs

Lynda Beny 0
Viewed 14

How can I clear form values after successful form submission? I have tried with "reset" and "resetValidation", but it doesn't work. I'm using quasar framework

AddUser component :

 <q-form
      ref="form"
      greedy
      class="row q-col-gutter-y-md"
      @submit="onSubmit"
    >
      <q-input
        :label="$t('users.fields.firstName')"
        class="col-12"
        v-model="user.firstName"
      />
      <q-input
        :label="$t('users.fields.lastName')"
        class="col-12"
        v-model="user.lastName"
      />
      <q-input
        :label="$t('users.fields.email')"
        class="col-12"
        v-model="user.email"
      />
     
    </q-form>

Js:

const form = ref<QForm>();

const user = ref<AddUserCommand>({
   firstName: '',
   lastName: '',
   email: '',
   role: Role.User,
   password: '',
   confirmPassword: '',
});

const onSubmit = () => {
 emit('submit', user);
 form.value?.reset();
};

I call the submit function in another component

    <add-user v-model="showAddUser" @submit="onSubmitAddUser" />
quasar-framework
1 Answers

If you want to reset the validations, yes, you can invoke: form.value.resetValidation();

But if you want to reset the input values in the form, you'd better do it manually:

const onSubmit = () => {
   emit('submit', user);
   user.firstName = ""
   user.lastName = ""
   user.email = ""
};
Hoàng Trần0
Related