Vue js Forms and Input Handling

Objective

Forms in Vue enable developers to build interactive interfaces where users can enter information, choose options, or trigger behaviors through input fields, radio buttons, checkboxes, and similar elements.

Binding Inputs

Vue’s reactive data system connects form elements using one-way or two-way binding. The directive v-model provides seamless two-way connection between interface controls and internal variables.

<input v-model="username" />

In this case, the username property synchronizes in real-time with the value inside the input box.

Input Element Categories

Vue supports numerous field types:

• Text box – for string capture
• Checkbox – toggles boolean
• Radio group – selects from limited predefined options
• Select dropdown – for compact multiple-choice
• Textarea – handles multi-line content

Each behaves uniquely, but all integrate naturally with Vue’s reactivity features.

Sample Usage

<template>   
     <div>     
       <input type="text" v-model="title">     
       <textarea v-model="bio"></textarea>     
       <select v-model="country">       
           <option value="in">India</option>       
           <option value="us">USA</option>     
      </select>     
      <input type="checkbox" v-model="subscribed">   
   </div> 
</template>  

<script> 
export default {   
   data() {     
     return {       
        title: '',       
        bio: '',       
        country: '',       
        subscribed: false     
     };   
  } 
}
 </script>

Modifiers

Vue allows modifiers with v-model to refine input control behavior:

• .lazy – delays update until blur event
• .trim – auto-removes whitespace
• .number – converts input to numeric type

<input v-model.lazy="email" /> 
<input v-model.trim="fullname" /> 
<input v-model.number="age" />

Custom Components with v-model

You can build your own input-like components and connect them with v-model using modelValue and @update:modelValue.

<!-- CustomInput.vue --> 
<template>   
     <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> 
</template>  

<script> 
export default {   
   props: ['modelValue'] 
} 
</script>

Use like this:

<CustomInput v-model="username" />

Form Submission

Vue encourages handling submission using @submit.prevent on

<form @submit.prevent="sendData">   
     <input v-model="email">   
     <button type="submit">Send</button> 
</form>

methods: {   
    sendData() {     
       console.log(this.email);   
     } 
}

Resetting

Clearing form values is easy with reactivity—just reassign default values:

this.title = ''; 
this.bio = ''; 
this.country = ''; 
This.subscribed = false;

Validation Concept (Optional Layer)

Vue by itself doesn’t enforce validation but integrates well with third-party validation utilities (e.g., VeeValidate, vuelidate). Manual checks can be added within methods to verify required input or match criteria.