In this tutorial, we will learn how to reset form fields after submission in Vue 3. We will provide two examples: in the first example, we will use the Composition API, and in the second example, we will use the Options API to reset form fields after submission.
Example 1 : How to Clear form field in Vue 3?
In this example, we explain the code on how to reset form fields in Vue 3 (Composition API) after submission. Please check below and use ‘Try it’ to edit or customize this code according to your preference.
Vue Js Reset Form Fields (Composition Api)
<script type="module">
const {createApp,ref} = Vue;
createApp({
setup() {
const name = ref('');
const email = ref('');
const address = ref('');
const resetForm = () => {
name.value = '';
email.value = '';
address.value = '';
};
return {
name,
email,
address,
resetForm,
};
}
}).mount("#app");
</script>
Output of Clear Form Fields After Submit in Vue 3
Example 2 : Vue Clear All Input Fields using Options Api
In the example code below, we utilize the reset() and options API in Vue.js to clear or reset form fields after submission.
Vue Reset Input Value (Options Api)
<script type="module">
import { createApp } from "vue";
createApp({
data() {
return {
name: '',
email: '',
address: '',
}
},
methods: {
resetForm() {
this.$refs.form.reset();
}
}
}).mount("#app");
</script>
Output of Vue Clear Form After Submit
