v-model for two-way binding in Vue - Step-by-Step Execution

Concept Flow - v-model for two-way binding

User types in input

↓

v-model updates bound variable

↓

Variable changes trigger UI update

↓

Input shows updated variable value

↩Back to User types

The flow shows how user input updates a variable and how that variable change updates the input, creating two-way binding.

Execution Sample

Vue

<template>
  <input v-model="name" />
  <p>Hello, {{ name }}!</p>
</template>

<script setup>
import { ref } from 'vue'
const name = ref('')
</script>

This code binds the input field to the variable 'name' so typing updates 'name' and changes to 'name' update the input.

Execution Table

Step	User Input	Variable 'name' Value	UI Update	Displayed Text
1	'' (empty)	'' (empty)	Input empty	Hello, !
2	'A'	'A'	Input shows 'A'	Hello, A!
3	'Al'	'Al'	Input shows 'Al'	Hello, Al!
4	'Ali'	'Ali'	Input shows 'Ali'	Hello, Ali!
5	User deletes input	'' (empty)	Input empty	Hello, !

💡 User stops typing, variable and UI stay in sync with last input.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	Final
name	''	''	'A'	'Al'	'Ali'	''

Key Moments - 2 Insights

Why does the input field update automatically when the variable changes?

Because v-model binds the input's value to the variable, any change to the variable triggers Vue to update the input's displayed value, as shown in execution_table steps 2-4.

What happens if the user deletes all text in the input?

The variable 'name' updates to an empty string, and the UI updates to show empty input and greeting, as seen in execution_table step 5.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'name' at step 3?

A 'Al'

B 'A'

C 'Ali'

D '' (empty)

💡 Hint

Check the 'Variable name Value' column at step 3 in the execution_table.

At which step does the input field become empty again?

A Step 2

B Step 5

C Step 3

D Step 1

💡 Hint

Look for when 'User deletes input' in the 'User Input' column in execution_table.

If the variable 'name' was programmatically set to 'Bob', what would happen to the input field?

A Input field would show previous value

B Input field would stay empty

C Input field would show 'Bob'

D Input field would clear and disable

💡 Hint

v-model keeps input and variable in sync, see concept_flow and execution_table.

Concept Snapshot

v-model creates two-way binding between input and variable.
User input updates variable automatically.
Variable changes update input display.
Use with ref() for reactive variables.
Simplifies keeping UI and data in sync.

Full Transcript

This visual execution shows how Vue's v-model directive links an input field to a variable named 'name'. When the user types, the input updates the variable. When the variable changes, the input updates to match. The execution table traces each step of typing and deleting, showing variable values and UI changes. Key moments clarify why input updates automatically and what happens when input is cleared. The quiz tests understanding of variable values at steps and the effect of programmatic changes. The snapshot summarizes v-model as a simple way to keep input and variable in sync with two-way binding.

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