v-model basics
v-model links a form input to a piece of data in both directions.
In this page:
Syntax
<input v-model="property">
<p>{{ property }}</p>v-model basics
v-model is sugar for binding the value and listening to input events. Typing updates the data and changing the data updates the input. It works on text inputs, textareas, checkboxes, radios and selects, choosing the right property and event for each.
Note:
v-model ignores the initial value attribute; set the initial value in data.
Example: v-model basics
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<input v-model="name" placeholder="Your name">
<p>Hello, {{ name || "stranger" }}!</p>
</div>
<script>
Vue.createApp({ data() { return { name: "" }; } }).mount("#app");
const input = document.querySelector("input");
input.value = "Ada";
input.dispatchEvent(new window.Event("input"));
Vue.nextTick(() => console.log(document.querySelector("p").textContent));
</script>
</body>
</html>
<!-- Output:
Rendered: Hello, Ada!
console: Hello, Ada!
-->Live Example
Related Topics
Common Mistakes
- Using an initial value attribute
- Expecting v-model to work on non-form elements
- Forgetting to declare the data property
Chapter Summary
- v-model is two-way binding
- Works on inputs, textareas, selects
- Data holds the initial value
- Sugar for :value plus @input
🔒
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: