Vue Forms and v-model Explained — Two-Way Data Binding
DodaTech
Updated 2026-06-28
1 min read
In this tutorial, you will learn about Vue Forms and v. We cover key concepts, practical examples, and best practices to help you master this topic.
Vue's v-model directive provides two-way data binding between form inputs and component state, automatically syncing user input to reactive data and vice versa.
What You'll Learn
- v-model with text, textarea, and selects
- v-model with checkboxes and radios
- Modifiers: number, trim, lazy
- Form validation basics
- Custom components with v-model
Why It Matters
v-model eliminates manual onChange handlers and value binding, reducing boilerplate for form inputs while maintaining reactivity.
<template>
<form @submit.prevent="submitForm">
<div>
<label>Name:</label>
<input v-model.trim="form.name" required />
</div>
<div>
<label>Age:</label>
<input v-model.number="form.age" type="number" />
</div>
<div>
<label>Interests:</label>
<input type="checkbox" value="coding" v-model="form.interests" /> Coding
<input type="checkbox" value="design" v-model="form.interests" /> Design
</div>
<div>
<label>Role:</label>
<select v-model="form.role">
<option value="">Select...</option>
<option value="developer">Developer</option>
<option value="designer">Designer</option>
</select>
</div>
<button type="submit">Submit</button>
</form>
</template>
<script setup>
import { ref, reactive } from "vue";
const form = reactive({
name: "",
age: null,
interests: [],
role: "",
});
</script>
Expected output: Form data is reactive and synced with inputs. trim removes whitespace, number converts to number type.
← Previous
Vue Event Handling Explained — v-on and @ Directives
Next →
Vue Component Communication Explained — Props and Emits
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro