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

CodePudding user response：

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.

CodePudding user response：

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

CodePudding user response：

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.