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.