VueJS Form handling tutorial

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.