Form handling in Vue JS

Hello guys today i am going to show you how to handle form inputs in VUE js.

Lets get started..

<template>
<div>
    <form action="">
        <label for="name">Name</label>
        <input type="text" id="name" v-model='formValues.name' class="form-control" />

        <label for="email">Email</label>
        <input type="email" id="email" v-model='formValues.email' class="form-control" />

        <label for="password">Password</label>
        <input type="password" id="password" v-model='formValues.password' class="form-control" />

        <label for="skills">Skills</label>
        <select name="skills" id="skils" v-model ='formValues.skills'>
            <option value="dehradun">Dehradun</option>
            <option value="haridwar">Haridwar</option>
            <option value="roorkee">Roorkee</option>
            <option value="Saharanpur">Saharanpur</option>
        </select>


    </form>

    <!-- printing the values entered in input field -->
    <div class="card bg-dark text-center text-light">
          <h1>{formValues.name}</h1> 
          <h1>{formValues.email}</h1> 
          <h1>{formValues.password}</h1>  
    </div>

</div>
</template>


<script>
    export default{
        data(){
            // data will be binded here
            formValues:{
                name:'',
                email:'',
                password:'',
                skills:[]
            }
        }
    }
</script>

In the template part we have first provided the input fields and binded the data to formValues object and then print the data in the template part.

NOTE - I have used bootstrap in this code so either install using cdn or install it using npm.

THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION PLEASE MENTION IT IN THE COMMENT SECTION

VUE JS DOCUMENTATION - https://vuejs.org/