CODEWITHSUNDEEP
javascriptvue.js
Mishen Thakshana
Mishen Thakshana

Reputation: 1544

How to reset a form in Vue 3

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

Upvotes: 4

Views: 10490

Answers (3)

Estus Flask
Estus Flask

Reputation: 222439

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.

Upvotes: 9

Karma Blackshaw
Karma Blackshaw

Reputation: 942

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

Upvotes: 3

Dr4jw3r
Dr4jw3r

Reputation: 181

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.

Upvotes: 0

Related Questions