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

1. Create a Form
2. Handle Form Submit
3. Run & Test

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. ?

---