v-model Directive

v-model is sugar for a value prop plus an update event — perfect for form inputs. This lesson covers practical patterns, syntax, and mistakes to avoid.

Two-Way Binding with v-model

v-model is sugar for a value prop plus an update event — perfect for form inputs.

On components, it defaults to modelValue + update:modelValue (configurable).

<input v-model="email" />
<!-- component -->
<CustomInput v-model="email" />

Native and component v-model.

Modifiers

.lazy .number .trim

Prefer Vue 3 + Composition API.
Use script setup for SFCs.
Keep components focused.
Lean on official docs.

v-model Directive Cheatsheet

Quick reference for patterns covered in this lesson.

Item	Example	Purpose
modelValue	prop	Default
update:modelValue	emit	Default
multiple	v-model:title	Args
lazy	change	Modifier
number	coerce	Modifier
trim	whitespace	modifier

Custom Components

defineModel() in script setup simplifies v-model wiring.

Common Mistakes

Mutating props instead of emitting updates.
Forgetting modifiers when parsing numbers.

Key Takeaways

v-model Directive is a core Vue skill.
Practice in a Vite app.
Prefer clarity.
Revisit docs for edge cases.

Pro Tip

Use defineModel for clean Vue 3.4+ component v-models.