Form Handling Tutorial in Vue.js
In this article, we’re going to learn how to handle form in Vue.js. We’ll bind form’s input elements using v-model
directive.
Table of Contents
Create a Form
Let’s create a form:
<form @submit.prevent="onSubmit">
<label for="name">Name</label><br>
<input type="text" id="name" v-model="name"/><br><br>
<label>Gender:</label><br>
<input type="radio" id="male" value="Male" v-model="gender"/>
<label for="male">Male</label>
<input type="radio" id="female" value="Female" v-model="gender"/>
<label for="female">Female</label><br><br>
<label for="married">Married?</label><br>
<select id="married" v-model="married">
<option disabled value="">Choose</option>
<option>Yes</option>
<option>No</option>
</select><br><br>
<label for="info">Info</label><br>
<textarea id="info" v-model="info"></textarea><br><br>
<button type="submit">Submit</button>
</form>
In the simple form, I’ve set v-model
directive for each input.
We’ve added @submit.prevent="onSubmit"
. It means on submitting the form, the page won’t re-load and onSubmit method will be called.
We’ll create the onSubmit method in the JS part.
Handle Form Submit
First, we’ve to define the data property of the v-model
directives. And we’ll create onSubmit method. Let’s do this:
<script>
export default {
data: function () {
return {
name: null,
gender: null,
married: null,
info: null,
};
},
methods: {
onSubmit: function () {
if (this.name === null || this.gender === null || this.married === null || this.info === null) {
console.log("Please fill in the form")
} else {
console.log('Name: ' + this.name);
console.log('Gender: ' + this.gender);
console.log('Married: ' + this.married);
console.log('Info: ' + this.info);
}
}
}
};
</script>
We’ve set a simple condition in onSubmit method. You can add your own logic.
Run & Test
Our application is ready. So the full code of our simple project:
<template>
<div id="app">
<form @submit.prevent="onSubmit">
<label for="name">Name</label><br>
<input type="text" id="name" v-model="name"/><br><br>
<label>Gender:</label><br>
<input type="radio" id="male" value="Male" v-model="gender"/>
<label for="male">Male</label>
<input type="radio" id="female" value="Female" v-model="gender"/>
<label for="female">Female</label><br><br>
<label for="married">Married?</label><br>
<select id="married" v-model="married">
<option disabled value="">Choose</option>
<option>Yes</option>
<option>No</option>
</select><br><br>
<label for="info">Info</label><br>
<textarea id="info" v-model="info"></textarea><br><br>
<button type="submit">Submit</button>
</form>
</div>
</template>
<script>
export default {
data: function () {
return {
name: null,
gender: null,
married: null,
info: null,
};
},
methods: {
onSubmit: function () {
if (this.name === null || this.gender === null || this.married === null || this.info === null) {
console.log("Please fill in the form")
} else {
console.log('Name: ' + this.name);
console.log('Gender: ' + this.gender);
console.log('Married: ' + this.married);
console.log('Info: ' + this.info);
}
}
}
};
</script>
Let’s run the project and see the result in the console.
npm run serve
Thanks for reading the article. ?Md Obydullah
Software Engineer | Ethical Hacker & Cybersecurity...
Md Obydullah is a software engineer and full stack developer specialist at Laravel, Django, Vue.js, Node.js, Android, Linux Server, and Ethichal Hacking.