v-model basics

Last reviewed May 28, 2026 Content v20260528

Track mode

client_vue

Means

In-browser Vue TS

Reading

~2 min

Level

intermediate

This lesson

This lesson teaches v-model basics: the concepts, APIs, and habits you need before advancing in Vue.

Two-way binding with v-model is a Vue hallmark—know when it helps forms and when explicit events are clearer.

You will apply v-model basics in contexts like: Login forms, filters, wizards, and settings panels with two-way binding.

Write TypeScript, click Run—Vue 3 loads from CDN with the template compiler, mountApp shows UI in #app, and printOutput feeds the terminal.

When you can explain the previous lesson's ideas without copying starter code.

v-model creates two-way binding on form inputs—a Vue hallmark. It is syntactic sugar for a value prop plus an input/update event listener.

Text inputs

<input v-model="email" />
<!-- equivalent idea -->
<input :value="email" @input="email = $event.target.value" />

Other controls

Checkbox: v-model="agreed" binds boolean checked
Select: v-model="role" on <select>
Custom components: modelValue prop + update:modelValue emit in Vue 3

Compared to React

React uses controlled inputs with explicit value and onChange. Vue’s v-model reduces boilerplate while keeping the same “single source of truth in state” idea.

Important interview questions and answers

Q: Is v-model magic global state?
A: No—it binds a local ref/reactive field to an input; still component-scoped unless you pass the ref down.
Q: v-model on custom components?
A: Implement modelValue + update:modelValue or named models like v-model:title.

Self-check

What two things does v-model combine?
How do you bind a checkbox boolean?

Challenge

Live greeting

Type in the input and confirm the paragraph updates.
Log the name on each change with watch and printOutput.

Done when: preview and terminal stay in sync with the input value.

Challenge

Trim on blur

Add v-model.trim to a text field.
Type spaces and submit—terminal JSON should omit leading/trailing space.

Done when: trimmed value matches what you would send to an API.

Interview prep

What does v-model do on inputs?: Two-way binding sugar: keeps the input in sync with a ref—text inputs bind value + input; checkboxes bind checked state.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

v-model on custom component?
Single source of truth?

No discussion yet. Be the first to ask a question.