Vue's v-model: Two-Way Binding Made Simple
v-model creates a two-way binding that synchronizes form inputs with your JavaScript data. Use it on any form element like an input or textarea. The footgun: it ignores initial HTML attributes; your JavaScript state is always the single source of truth.
Why it exists
To eliminate the boilerplate of manually syncing form inputs with application state. Without it, you must bind an element's value and listen for its input events separately for every single form field, which is repetitive, verbose, and error-prone.
The mental model
Think of v-model as a shortcut for a two-way conversation between your UI and your data. Normally, data flows one way from your script to the template. v-model opens a return channel, so when a user types into an input, the change flows back to your script's data property automatically. It's syntactic sugar that bundles a prop binding and an event listener into one clean directive.
How it works
Vue expands v-model into a property binding and an event listener at compile time. The exact pair depends on the element. For text inputs and textareas, <input v-model="searchText"> becomes <input :value="searchText" @input="searchText = $event.target.value">. For checkboxes and radio buttons, it uses the checked property and the change event. For select dropdowns, it's the value property and change event. Vue handles this logic so you don't have to.
When to use it
Use v-model whenever you need to capture user input from a form. It is the idiomatic, go-to solution in Vue for text fields, textareas, checkboxes, radio buttons, and select dropdowns. It is also the standard way to enable two-way binding on your own custom components.
When not to use it
Avoid v-model if you need to react to IME composition events (e.g., for Chinese or Japanese input), as it only updates after composition is complete. In that specific case, you must manage the :value binding and @input listener yourself to handle intermediate states. If you need to run complex logic on the input value before updating state, a custom event handler can be clearer.
One canonical example
To bind a text input to a message data property, you simply write <input v-model="message">. If you declare message in your script with an initial value of "Hello Vue", the input field will render with "Hello Vue" pre-filled. When the user types "Hello World" into the input, the message property in your script will instantly update to "Hello World" without any extra code.
Interview question
For a standard text input element, which underlying property binding and event listener pair does Vue's v-model typically abstract?
- a.v-bind:id and @click
- b.v-on:submit and v-bind:model
- c.v-bind:value and @inputCorrect
- d.v-bind:name and @change
Why? this is the answer
The card states that for text inputs, v-model becomes :value and @input, binding the input's value and listening for immediate changes. Option D is a common distractor because @change is used for some form elements, but @input is specific to text inputs for real-time updates.
Just read this? Test yourself on what you have been reading.
Read the original → vuejs.org
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on vue — each one lists the topics its interview covers.
See open roles