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

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

• javascript
• vue.js

• There's no newSupplierForm, is it the same thing as newUserForm? Please, provide stackoverflow./help/mcve for the problem. It's unknown what happens inside the form. Generally you want to use v-model for form inputs, then you're able to control their values directly – Estus Flask Commented Jul 28, 2022 at 14:53
• Sorry for simplicity I used the newUserForm I forgot to put it there :( – Mishen Thakshana Commented Jul 28, 2022 at 14:55
• How is userForm used? – Estus Flask Commented Jul 28, 2022 at 15:06
• using v-model to the inputs – Mishen Thakshana Commented Jul 28, 2022 at 16:07
• Please, provide this code for clarity, as the supposed solution is affected by the way it works. – Estus Flask Commented Jul 28, 2022 at 16:12

3 Answers 3

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 bees nested at some point.

Somehow this work became so repetitive to me so I made a posable.

/**
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 posable works only if the object is shallow (as mentioned by @EstusFlask). Feel free to make changes in the posable to suit your taste

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.