🔄 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

Element Type	Behavior
<input type="text">	Binds to string
<textarea>	Binds to text string
<input type="checkbox">	Binds to boolean or array
<input type="radio">	Binds to selected value
<select>	Binds to selected option value

---

🧬 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:

Modifier	Behavior
.lazy	Updates only after change instead of input
.number	Automatically converts input to a number
.trim	Trims whitespace from the beginning and end of input

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.

---

Share Now :