v-model for two-way binding in Vue

Introduction

v-model helps keep your data and input fields in sync automatically. When you change the input, the data updates, and when the data changes, the input updates.

You want to update a form input and keep the data updated without writing extra code.

You need to show a value in an input box and let users change it easily.

You want to build interactive forms like checkboxes, text fields, or selects that reflect your data.

You want to simplify handling user input in your Vue components.

Syntax

Vue

<input v-model="dataProperty" />

The v-model directive binds the input's value to a data property.

It works with many input types like text, checkbox, radio, and select.

Examples

Bind a text input to the name data property.

Vue

<input v-model="name" />

Bind a checkbox to the isChecked boolean property.

Vue

<input type="checkbox" v-model="isChecked" />

Bind a select dropdown to selectedOption.

Vue

<select v-model="selectedOption">
  <option value="A">Option A</option>
  <option value="B">Option B</option>
</select>

Sample Program

This Vue component uses v-model to bind the input field to the username data. When you type in the input, the paragraph below updates automatically to show the current username.

Vue

<template>
  <div>
    <label for="username">Username:</label>
    <input id="username" v-model="username" />
    <p>Your username is: {{ username }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const username = ref('')
</script>

Important Notes

v-model automatically listens for input events and updates the data.

For custom components, you can use v-model with modelValue and update:modelValue events.

Remember to initialize your data property (like using ref('') for strings) so Vue can track it.

Summary

v-model links input fields and data for easy two-way binding.

It works with many input types and updates automatically.

Use it to simplify forms and user input handling in Vue.

Practice

1. What is the main purpose of v-model in Vue?

easy

A. To define component props

B. To fetch data from an API

C. To conditionally render elements

D. To create two-way binding between form inputs and component data

Solution

1. Step 1: Understand what v-model does

   v-model connects form inputs to data so changes in one update the other automatically.

2. Step 2: Compare with other Vue features

   Fetching data, conditional rendering, and props are unrelated to two-way binding.

3. Final Answer:

   To create two-way binding between form inputs and component data -> Option D

4. Quick Check:

   v-model = two-way binding [OK]

Hint: Remember: v-model syncs input and data automatically [OK]

Common Mistakes:

• Confusing v-model with fetching data
• Thinking v-model controls rendering
• Mixing v-model with props definition

2. Which of the following is the correct syntax to bind a text input to a data property name using v-model?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall correct v-model syntax

   The correct syntax is v-model="propertyName" without colon or extra suffix.

2. Step 2: Check each option

   uses correct syntax. wrongly uses colon. uses v-bind incorrectly. misplaces the property and type.

3. Final Answer:

   <input v-model="name" type="text" /> -> Option C

4. Quick Check:

   v-model="name" is correct syntax [OK]

Hint: v-model is used without colon and directly on input [OK]

Common Mistakes:

• Adding colon before v-model
• Using v-bind instead of v-model
• Incorrect attribute order or names

3. Given this Vue component data and template:

data() { return { message: 'Hello' } }
<input v-model="message" />
<p>{{ message }}</p>

What will be displayed in the paragraph after the user types "Hi" in the input?

medium

A. Hi

B. undefined

C. {{ message }}

D. Hello

Solution

1. Step 1: Understand v-model behavior

   Typing in the input updates the message data property immediately.

2. Step 2: Check template interpolation

   The paragraph displays the current value of message, which changes to "Hi" after typing.

3. Final Answer:

   Hi -> Option A

4. Quick Check:

   Input changes update message = Hi [OK]

Hint: v-model updates data instantly, reflected in template [OK]

Common Mistakes:

• Thinking paragraph stays static
• Confusing interpolation syntax
• Assuming input does not update data

4. What is wrong with this code snippet?

<input v-model="userName">

Assuming userName is defined in data, why might this cause an error?

medium

A. v-model cannot be used on input elements

B. Missing closing tag for input element

C. userName is not reactive

D. v-model requires a colon prefix

Solution

1. Step 1: Check HTML syntax

   The input tag is not self-closed or properly closed, which is invalid in Vue templates.

2. Step 2: Understand Vue template rules

   Input elements must be self-closed like <input /> or have a closing tag.

3. Final Answer:

   Missing closing tag for input element -> Option B

4. Quick Check:

   Input tags must be closed [OK]

Hint: Always close input tags with /> in Vue templates [OK]

Common Mistakes:

• Forgetting to close input tags
• Thinking v-model needs colon
• Assuming v-model can't be on inputs

5. You want to bind a checkbox to a data property isChecked using v-model. Which code snippet correctly implements this with two-way binding and shows "Checked" or "Not checked" text accordingly?

hard

A. {{ isChecked ? 'Checked' : 'Not checked' }}

B. {{ isChecked ? 'Checked' : 'Not checked' }}

C. {{ isChecked }}

D. {{ isChecked }}

Solution

1. Step 1: Identify correct checkbox binding

   Using v-model="isChecked" binds the checkbox state two-way with the data property.

2. Step 2: Verify conditional display

   The paragraph uses a ternary expression to show "Checked" or "Not checked" based on isChecked.

3. Final Answer:

   <input type="checkbox" v-model="isChecked" /> <p>{{ isChecked ? 'Checked' : 'Not checked' }}</p> -> Option A

4. Quick Check:

   Checkbox v-model + conditional text =

   {{ isChecked ? 'Checked' : 'Not checked' }}

   [OK]

Hint: Use v-model on checkbox for two-way binding [OK]

Common Mistakes:

• Using :checked instead of v-model
• Wrong attribute names like v-model.checked
• Not updating data on checkbox toggle