VueJS Form handling tutorial

by Sai gowtham3min read
VueJS Form handling tutorial

In this tutorial, we are going to learn about how to handle forms in vuejs with the help of examples.

V-Model

In Vue v-model directive helps us to create two-way data binding on form input,select and textarea elements.

What is two-way data binding?

Two data binding means

  • The data we changed in the view has updated the state.

  • The data in the state has updated the view.

Input element example

Let’s bind the html input element to a data property using v-model directive.

<template>
    <div>
      <form>
       <input type="name" placeholder="Name"  v-model="name" />     </form>
     <p>My name is: {{name}}</p>
    </div>
</template>

<script>
  export default{
      data:function(){
        return{
          name:''        }
      }
  }
</script>

In the above code, we have connected the name data property to a form input element.

Textarea element example

The textarea element allows us to write the multiline text.

<template>
    <div>
      <form>
       <textarea  placeholder="Comment" v-model="comment" ></textarea>     </form>
      <p style="white-space:pre-line">
         My comment is: {{comment}}
      </p>
    </div>
</template>

<script>
  export default{
      data:function(){
        return{
          comment:''
        }
      }
  }
</script>

Checkbox example

Here we bind the multiple checkboxes to the same array data property hobbies.

<template>
  <fieldset>
    <legend>Choose your Hobbies</legend>
    <div>
      <input type="checkbox" id="coding" v-model="hobbies" />      <label for="coding">Games</label>
    </div>
    <div>
      <input type="checkbox" id="music" v-model="hobbies" />      <label for="music">Music</label>
    </div>
  </fieldset>
</template>

<script>
export default {
  data: function() {
    return {
      hobbies: []
    };
  }
};
</script>

vue-textarea-example

Select element example

<template>
  <form>
    <select v-model="rating">
     <option disabled value="">Choose your Rating</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    <p>You've rated: {{ rating }}</p>
  </form>
</template>

<script>
export default {
  data: function() {
    return {
      rating: ""
    };
  }
};
</script>

In the above code, we have bound the rating property to select element.

Radio button example

<template>
  <form>
    <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>
    <p>Gender: {{ gender }}</p>
  </form>
</template>

<script>
export default {
  data: function() {
    return {
      gender: ""
    };
  }
};
</script>

Submitting form

Let’s see how to submit the form to the backend.

 <template>
  <form @submit.prevent="handleSubmit">   <input type="name" placeholder="name" v-model="name"/>
    <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>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data: function() {
    return {
      name:"",
      gender: ""
    };
  },
  methods:{
      handleSubmit:function(){
          console.log('Name'.this.name);
          console.log('Gender'.this.gender);
      }
  }
};
</script>

Here we added a @submit event listener to the form element with .prevent modifier, so that we stopped the browser default re-loading behavior whenever we submit a form.