Advanced VueJS: Build Better Applications Efficiently/

...

/

How `v-model` Actually Works

How `v-model` Actually Works

Learn how Vue's v-model works in the back and build it yourself.

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.

Press + to interact
<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

...