Search⌘ K
AI Features
Home
Courses
Advanced VueJS: Build Better Applications Efficiently

How `v-model` Actually Works

Explore the inner workings of Vue's v-model directive and how it enables two-way binding between form elements and component data. Understand Vue's reactivity system, the difference between one-way and two-way binding, and how v-model simplifies syncing input values with data properties, making form handling efficient and reactive.

We'll cover the following...

The v-model directive is arguably one of the essential features of Vue. It allows for the simple two-way binding of form elements and data and is usually the first thing people talk about when explaining Vue to beginners. It works with both data, and computed (as long as get and set are both implemented) and only needs a single attribute. Let’s see how it works.

HTML
<template>
  <div>
    <label for="textInput">Reactive text:</label>
    <input 
      v-model="myText"
      id="textInput"
    >
    <p>
      Output: {{ myText }}
    </p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myText: 'Hello, World!'
    }
  }
}
</script>

In the code example above, we see a simple Vue component. The property myText is bound to the input field via v-model. Any change the user makes in the <input> is automatically reflected in the output a few lines below. The default value is Hello, World!.

Vue’s

...