Vue 3 — v-model
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:23:46

---
title: Vue 3 — v-model
published: true
date: 2020-07-26 01:35:19 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/26/vue-3%e2%80%8a-%e2%80%8av-model-2/?utm_source=rss&utm_medium=rss&utm_campaign=vue-3%25e2%2580%258a-%25e2%2580%258av-model-2
---

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

In this article, we’ll look at how to use the Vue 3 `v-model` directive.

### Multiline Text

`v-model` also works with multiline text.

For instance, we can write:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <textarea v-model="message" placeholder="message"></textarea>
      <p style="white-space: pre-line;">{{ message }}</p>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            message: ""
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>

```

And when we type in multiple lines of text, it’ll be displayed with the same formatting.

This is because we have the `white-space: pre-line;` style.

We shouldn’t use interpolation for text areas.

Instead, we always use `v-model` .

### Checkbox

`v-model` also works with checkboxes.

For example, we can write:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <input type="checkbox" v-model="checked" />
      <label for="checkbox">{{ checked }}</label>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            checked: true
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>

```

to bind the checked value of the checkbox to the `checked` state.

We can also have multiple checkboxes bound to the same array:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <input type="checkbox" value="apple" v-model="checkedFruits" />
      <label>apple</label>
      <input type="checkbox" value="orange" v-model="checkedFruits" />
      <label>orange</label>
      <input type="checkbox" value="grape" v-model="checkedFruits" />
      <label>grape</label>
      <p>{{checkedFruits}}</p>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            checkedFruits: []
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>

```

`v-model` is smart enough to populate the `checkedFruits` array with the checked choices.

All we have to do is set the `value` attribute value and the array variable to bind to `v-model` and we’re set.

Now when we check or uncheck the checkboxes, the `checkedFruits` array will change automatically.

### Radio

Like checkboxes, Vue 3’s `v-model` directive can bind to radio button choices.

All we need to have is the `value` attribute and the `v-model` directive on each checkbox and Vue will do the selection binding automatically.

For example, we can write:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <input type="radio" value="apple" v-model="selected" />
      <label>apple</label>
      <input type="radio" value="orange" v-model="selected" />
      <label>orange</label>
      <input type="radio" value="grape" v-model="selected" />
      <label>grape</label>
      <p>{{selected}}</p>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            selected: ""
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>

```

We pass in the `selected` property returned from `data` as the value of the `v-model` directive.

The `value` attribute as the value of each radio button.

Now when we click on the radio button, we’ll see the value displayed below it.

We can only click one since they’re all bound to the same variable.

### Select

`v-model` also works with select elements.

For example, we can write:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <select v-model="selected">
        <option disabled value="">Please select one</option>
        <option>apple</option>
        <option>orange</option>
        <option>grape</option>
      </select>
      <p>{{ selected }}</p>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            selected: ""
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>

```

We passed the `selected` value to the `v-model` so it’ll be updated if we select a value.

If there’s no `value` attribute in the option, then the text between the `option` tags will be used as the value.

### Conclusion

`v-model` lets us bind various form control values to Vue instance states.

The post [Vue 3 — v-model](https://thewebdev.info/2020/07/26/vue-3%e2%80%8a-%e2%80%8av-model-2/) appeared first on [The Web Dev](https://thewebdev.info).