v-model with text inputs in Vue - Step-by-Step Execution

Concept Flow - v-model with text inputs

User types in input box

↓

v-model updates bound variable

↓

Variable value changes

↓

Input box shows updated value

↓

Reactive UI reflects changes

When the user types in a text input, v-model updates the linked variable, which then updates the input display and any other reactive parts.

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 box to the variable 'name' using v-model, showing typed text live below.

Execution Table

Step	User Input	Variable 'name' Value	Action	Rendered Output
1	'' (empty)	''	Initial load, variable empty	Input empty, paragraph shows 'Hello, !'
2	'J'	'J'	User types 'J', v-model updates 'name'	Input shows 'J', paragraph shows 'Hello, J!'
3	'Jo'	'Jo'	User types 'o', v-model updates 'name'	Input shows 'Jo', paragraph shows 'Hello, Jo!'
4	'Jon'	'Jon'	User types 'n', v-model updates 'name'	Input shows 'Jon', paragraph shows 'Hello, Jon!'
5	'' (cleared)	''	User clears input, v-model updates 'name'	Input empty, paragraph shows 'Hello, !'

💡 User stops typing or clears input, variable and UI stay in sync.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5
name	''	'J'	'Jo'	'Jon'	''

Key Moments - 3 Insights

Why does the paragraph update immediately when I type in the input?

Because v-model links the input's value to the variable 'name'. When you type, v-model updates 'name', and Vue re-renders the paragraph using the new value (see execution_table steps 2-4).

What happens if I clear the input box?

Clearing the input sets the variable 'name' to an empty string via v-model, so the paragraph updates to show no name (see execution_table step 5).

Can I change the variable 'name' in code and see the input update?

Yes! Because v-model is two-way binding, changing 'name' updates the input box automatically, keeping UI and data in sync.

Visual Quiz - 3 Questions

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

A 'Jo'

B 'Jon'

C 'J'

D ''

💡 Hint

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

At which step does the input get cleared and 'name' becomes empty?

A Step 3

B Step 5

C Step 4

D Step 2

💡 Hint

Look for the step where User Input is empty and variable 'name' is ''.

If the user types 'Anna' instead of 'Jon', how would the variable 'name' change after Step 4?

A 'Ann'

B 'Jon'

C 'Anna'

D ''

💡 Hint

v-model updates the variable to exactly what the user types, see variable_tracker pattern.

Concept Snapshot

v-model with text inputs:
- Binds input value to a variable
- Two-way binding: input changes update variable, variable changes update input
- Use with ref() for reactive variables
- Updates UI reactively as user types
- Keeps data and UI in sync automatically

Full Transcript

This example shows how Vue's v-model directive binds a text input to a reactive variable named 'name'. When the user types in the input box, v-model updates the variable immediately. Vue then re-renders any part of the UI that uses 'name', such as the greeting paragraph. Clearing the input sets the variable to an empty string, updating the UI accordingly. This two-way binding keeps the input and variable synchronized without extra code.