v-model modifiers (lazy, number, trim) in Vue - Step-by-Step Execution

Concept Flow - v-model modifiers (lazy, number, trim)

User input event

↓

v-model binding

↓

Apply modifiers

↓

Update component state

↓

Re-render with new value

User input triggers v-model update, modifiers adjust when and how the value updates before state changes and re-render.

Execution Sample

Vue

<template>
  <input v-model.lazy="text" />
  <input v-model.number="age" />
  <input v-model.trim="name" />
</template>

Three inputs using v-model with lazy, number, and trim modifiers to control update timing and value format.

Execution Table

Step	Input Event	Modifier	Value Before	Value After	Update Triggered	Component State
1	User types 'h'	lazy	""	""	No (lazy waits for change event)	text: ""
2	User types 'e'	lazy	""	""	No	text: ""
3	User leaves input (change event)	lazy	""	"he"	Yes	text: "he"
4	User types '3'	number	""	3	Yes	age: 3 (number converted)
5	User types '4a'	number	3	NaN	Yes	age: NaN (invalid number)
6	User types ' John '	trim	""	"John"	Yes	name: "John"
7	User types ' Jane Doe '	trim	John	"Jane Doe"	Yes	name: "Jane Doe"
8	User types ' '	trim	Jane Doe	""	Yes	name: ""
9	User types 'hello'	none	""	"hello"	Yes	normal v-model updates immediately
10	User types ' 42 '	number + trim (combined)	""	42	Yes	value trimmed then converted to number: 42
11	User types 'abc'	number + trim	42	NaN	Yes	NaN due to invalid number after trim
12	User types ' 7 '	lazy + number + trim	42	"7"	No (lazy waits for change event)	value not updated yet
13	User leaves input (change event)	lazy + number + trim	42	7	Yes	value updated to 7 (trimmed and number)
14	User types ' 8a '	lazy + number + trim	7	"8a"	No	value not updated yet
15	User leaves input (change event)	lazy + number + trim	7	NaN	Yes	value updated to NaN (invalid number)
16	End	-	-	-	-	-

💡 Execution stops after user finishes input events and component state updates accordingly.

Variable Tracker

Variable	Start	After 1	After 3	After 4	After 5	After 6	After 7	After 8	After 10	After 13	Final
text	""	""	"he"	"he"	"he"	"he"	"he"	"he"	"he"	"he"	"he"
age	""	""	""	3	NaN	NaN	NaN	NaN	NaN	NaN	NaN
name	""	""	""	""	""	"John"	"Jane Doe"	""	""	""	""

Key Moments - 3 Insights

Why doesn't the value update immediately when using v-model.lazy?

Because lazy waits for the change event (like when the input loses focus), not on every input event. See execution_table rows 1-3.

What happens if the input value can't be converted to a number with v-model.number?

The value becomes NaN (not a number), which is still assigned to the state. See execution_table rows 5 and 11.

How does v-model.trim affect the input value before updating?

It removes spaces at the start and end of the input before updating the state. See execution_table rows 6-8.

Visual Quiz - 3 Questions

Look at the execution_table at step 3. What is the value of 'text' after the change event with v-model.lazy?

A ""

B "h"

C "he"

D "hello"

💡 Hint

Check the 'Value After' and 'Component State' columns at step 3 in execution_table.

At which step does the 'age' variable become NaN due to invalid number input?

A Step 4

B Step 5

C Step 6

D Step 13

💡 Hint

Look for 'age: NaN' in the 'Component State' column in execution_table.

If you combine v-model.lazy, v-model.number, and v-model.trim, when does the component state update?

A Only on change event (input loses focus)

B On every input event

C Immediately after trimming

D Never updates

💡 Hint

See steps 12 and 13 where lazy modifier delays update until change event.

Concept Snapshot

v-model modifiers adjust how input updates state:
- lazy: updates on change event (blur), not input
- number: converts input to number before update
- trim: removes whitespace before update
Modifiers can combine for precise control
Use to improve input handling UX

Full Transcript

This visual trace shows how Vue's v-model modifiers lazy, number, and trim affect input binding. Lazy waits for the change event before updating state, number converts input to a numeric value or NaN if invalid, and trim removes spaces before updating. The execution table tracks user input events, modifier effects, and component state changes step-by-step. Variable tracking shows how 'text', 'age', and 'name' change over time. Key moments clarify common confusions about update timing and value conversion. The quiz tests understanding of when and how values update with these modifiers. This helps beginners see exactly how v-model modifiers control input behavior in Vue.