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.

Practice

1. What does v-model do when used on a text input in Vue?

easy

A. It listens for clicks on the input but does not update the value.

B. It only sets the initial value of the input but does not update data.

C. It creates a two-way binding between the input and a data property.

D. It disables the input field from user interaction.

Solution

1. Step 1: Understand v-model purpose

   v-model connects the input's value with a Vue data property, syncing changes both ways.

2. Step 2: Compare options with v-model behavior

   Only It creates a two-way binding between the input and a data property. describes this two-way binding correctly; others describe incorrect or unrelated behaviors.

3. Final Answer:

   It creates a two-way binding between the input and a data property. -> Option C

4. Quick Check:

   v-model = two-way binding [OK]

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

Common Mistakes:

• Thinking v-model only sets initial value
• Confusing v-model with event listeners
• Assuming v-model disables input

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

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify correct v-model syntax

   The correct syntax uses v-model="username" on the input element.

2. Step 2: Check input type and binding

   <input v-model="username" type="text" /> uses correct syntax and input type text. <input :v-model="username" type="text" /> incorrectly uses colon binding. <input v-bind:model="username" type="text" /> misuses v-bind. <input v-model='username' type='checkbox' /> uses checkbox type, not text.

3. Final Answer:

   <input v-model="username" type="text" /> -> Option A

4. Quick Check:

   Correct v-model syntax = [OK]

Hint: Use v-model="property" without colon for text inputs [OK]

Common Mistakes:

• Adding colon before v-model
• Using v-bind:model instead of v-model
• Mismatching input type with v-model usage

3. Given this Vue component code:

const app = Vue.createApp({
  data() {
    return { message: 'Hello' };
  }
});

// Template:
// <input v-model="message" type="text" />
// <p>{{ message }}</p>

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

medium

A. Hello

B. {{ message }}

C. An empty string

D. Hi Vue

Solution

1. Step 1: Understand v-model effect on data

   Typing in the input updates the message data property immediately due to two-way binding.

2. Step 2: Check paragraph binding

   The paragraph displays {{ message }}, so it shows the updated value typed by the user.

3. Final Answer:

   Hi Vue -> Option D

4. Quick Check:

   Input changes update message = displayed text [OK]

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

Common Mistakes:

• Thinking paragraph shows initial value only
• Confusing mustache syntax as literal text
• Assuming input does not update data

4. What is wrong with this Vue template snippet?

<input v-model="userName" type="text" />
<p>User: {{ username }}</p>

Why does the paragraph not update when typing in the input?

medium

A. v-model cannot be used on text inputs.

B. The data property is named differently from the template binding.

C. The input type should be "password" for v-model to work.

D. Must use v-bind instead of v-model for inputs.

Solution

1. Step 1: Compare data property and template usage

   The input uses v-model="userName" but paragraph uses {{ username }} with different casing.

2. Step 2: Understand Vue is case-sensitive

   Vue treats userName and username as different properties, so paragraph does not update.

3. Final Answer:

   The data property is named differently from the template binding. -> Option B

4. Quick Check:

   Case mismatch breaks binding = The data property is named differently from the template binding. [OK]

Hint: Check exact spelling and casing of data and template names [OK]

Common Mistakes:

• Assuming v-model doesn't work on text inputs
• Thinking input type affects v-model binding
• Confusing v-bind and v-model usage

5. You want to create a form with two text inputs bound to firstName and lastName using v-model. You also want to display the full name live as the user types. Which Vue template snippet correctly achieves this?

hard

A.

Full Name: {{ firstName + ' ' + lastName }}

B.

Full Name: {{ firstName & lastName }}

C.

Full Name: {{ firstName.concat(lastName) }}

D.

Full Name: {{ firstName + lastName }}

Solution

1. Step 1: Check how full name is constructed

   <input v-model="firstName" type="text" /> <input v-model="lastName" type="text" /> <p>Full Name: {{ firstName + ' ' + lastName }}</p> concatenates firstName and lastName with a space, showing a proper full name.

2. Step 2: Analyze other options for correctness

   <input v-model="firstName" type="text" /> <input v-model="lastName" type="text" /> <p>Full Name: {{ firstName & lastName }}</p> uses & which is invalid in JS expressions. <input v-model="firstName" type="text" /> <input v-model="lastName" type="text" /> <p>Full Name: {{ firstName.concat(lastName) }}</p> uses concat without space, so names join without space. <input v-model="firstName" type="text" /> <input v-model="lastName" type="text" /> <p>Full Name: {{ firstName + lastName }}</p> concatenates without space, so names run together.

3. Final Answer:

   <input v-model="firstName" type="text" /> <input v-model="lastName" type="text" /> <p>Full Name: {{ firstName + ' ' + lastName }}</p> -> Option A

4. Quick Check:

   Use + with space to join strings in template [OK]

Hint: Use + ' ' + to join strings with space in mustache [OK]

Common Mistakes:

• Using & instead of + for string join
• Forgetting space between names
• Using concat without space