Vue.Js Reset Form Fields
Vue.Js Reset Form Fields It is very simple to reset form fields in Vue Js. We can create custom function to handle the clear form after submit in Vue Js. Here in this tutorial we are going to explain how to reset form in Vue.Js. You can use our online editor to edit and run the code online.
How to reset form fields in Vue.JS, Clear Form After Submit JavaScript Example
You can reset form fields simply as below-
Clear Form After Submit Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<form id="form"><br>
<input v-model="name" name="name" type="text" placeholder='Name' /><br>
<input v-model="email" name="email" type="email" placeholder='Email' /><br>
<input v-model="phone" name="phone" type="phone" placeholder='Phone' /><br>
<button @click='resetForm'>reset</button>
</form>
</div>
<script>
new Vue({
el: '#app',
data: {
email: '',
name: '',
phone = '';
},
methods:{
resetForm: function () {
this.email = '';
this.name = '';
this.phone = '';
}
} });
</script>
</body>
</html>
|
On the same way you can create your own function to reset the form fields in Vue Js.
Output of above example-
Advertisements
