Vue v-model – Two-Way Data Binding in Vue.js (2025 Guide)

Introduction – What is v-model in Vue?

Vue’s v-model directive makes it easy to keep form input elements and data properties in sync. Known as two-way data binding, it ensures that changes in the UI instantly reflect in the data, and vice versa.

In this guide, you’ll learn:

• What v-model does and how it works
• Supported HTML input types
• Custom component bindings with v-model
• Practical use cases and best practices

What is v-model?

v-model is a Vue directive that creates bidirectional binding between an HTML form element and a data property.

Basic Syntax:

<input v-model="username">

What It Does:

• Binds the value of the input to username
• Updates username when the user types
• Updates the input when username changes programmatically

Example – Text Input Binding

<template>
  <div>
    <input v-model="name" placeholder="Enter your name" />
    <p>Hello, {{ name }}</p>
  </div>
</template>

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

Result: Typing into the input updates name, and the paragraph updates reactively.

Elements Supported by v-model

Checkbox Example – Boolean Binding

<input type="checkbox" v-model="accepted" />
<label>I accept the terms</label>

<script>
export default {
  data() {
    return { accepted: false };
  }
}
</script>

Result: accepted is true if checked, false if unchecked.

Multiple Checkbox Binding with Array

<label><input type="checkbox" v-model="selected" value="HTML"> HTML</label>
<label><input type="checkbox" v-model="selected" value="CSS"> CSS</label>

<p>Selected: {{ selected }}</p>

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

Result: selected will be an array like ['HTML', 'CSS'].

Radio Button Binding

<input type="radio" value="Male" v-model="gender"> Male
<input type="radio" value="Female" v-model="gender"> Female

<p>Gender: {{ gender }}</p>

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

Result: gender is updated with the selected radio value.

Select Dropdown Example

<select v-model="language">
  <option>JavaScript</option>
  <option>Python</option>
  <option>Vue</option>
</select>

<p>You selected: {{ language }}</p>

<script>
export default {
  data() {
    return { language: 'JavaScript' };
  }
}
</script>

v-model with Custom Components

Vue allows using v-model with components using modelValue and @update:modelValue in Vue 3.

Parent Component:

<CustomInput v-model="username" />

Child Component (CustomInput.vue):

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

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

Mechanism:

• modelValue prop replaces value
• Emit update:modelValue to trigger v-model updates

v-model Modifiers

Vue offers built-in modifiers for better control:

Example:

<input v-model.lazy.trim="username">
<input v-model.number="age">

Real-World Example – Login Form

<template>
  <form @submit.prevent="login">
    <input v-model="email" placeholder="Email" />
    <input v-model="password" type="password" placeholder="Password" />
    <button>Login</button>
  </form>
</template>

<script>
export default {
  data() {
    return { email: '', password: '' };
  },
  methods: {
    login() {
      alert(`Email: ${this.email}, Password: ${this.password}`);
    }
  }
}
</script>

Functionality: v-model syncs input fields with data properties.

Summary – Recap & Next Steps

The v-model directive is a powerful and essential feature in Vue. It makes handling form inputs clean and reactive by eliminating manual event binding and data synchronization.

Key Takeaways:

• Enables two-way data binding between input and Vue data
• Works with text, checkbox, radio, select, and custom components
• Supports modifiers like .lazy, .number, .trim
• Simplifies form building in Vue apps

Real-World Relevance:
v-model is used in almost every form-based component—from login pages to data entry UIs and custom form controls.

FAQ Section

What does v-model do in Vue?

It creates two-way data binding between a form input and a Vue data property.

Can v-model be used with checkboxes and radio buttons?

Yes. For checkboxes, it binds to a boolean or array. For radio buttons, it binds to the selected value.

How does v-model work in custom components?

It maps to modelValue prop and listens for update:modelValue events to sync changes.

What are .lazy, .number, and .trim in v-model?

They modify the update behavior:

• .lazy: updates on change
• .number: casts value to number
• .trim: removes whitespace

Is v-model reactive?

Yes. Any change in the input updates the data, and any change in the data updates the input.