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

---
title: Vue 3 — More About v-model
published: true
date: 2020-07-26 01:34:41 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/26/vue-3%e2%80%8a-%e2%80%8amore-about-v-model-2/?utm_source=rss&utm_medium=rss&utm_campaign=vue-3%25e2%2580%258a-%25e2%2580%258amore-about-v-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.

### Multiple Select

Select elements that let us do multiple selections work with the `v-model` directive.

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">
      <select v-model="selected" multiple>
        <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 have the `select` element which has the `multiple` attribute.

The `selected` variable is a variable instead of a string since it can contain multiple values.

`v-model` is bound to the `selected` array so that Vue can get all the selected values and put it in the array.

Now when we choose multiple options from the select box, we can see all of them in an array.

### Dynamic Options

We can add dynamic options in the select element.

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">
      <select v-model="selected">
        <option disabled value="">Please select one</option>
        <option v-for="option in options" :value="option.value">
          {{ option.text }}
        </option>
      </select>
      <p>{{ selected }}</p>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            selected: [],
            options: [
              { value: "apple", text: "apple" },
              { value: "orange", text: "orange" },
              { value: "grape", text: "grape" }
            ]
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>

```

to render the options with the `v-for` directive.

`option.value` is used as the value of each `option` .

and `option.text` is used as the value of each text entry.

### Value Bindings

Radio buttons and select elements are bound to string with `v-model` .

Checkboxes are bound to boolean values.

We can use the `v-bind` directive to bind to types of values that are different from the default.

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="toggle"
        true-value="yes"
        false-value="no"
      />
      <p>{{ toggle }}</p>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            toggle: ""
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>

```

We added the `true-value` and `false-value` props so that the checkbox bind to those values instead of a boolean.

So `true` is `'yes'` and `false` is `'no'` .

That’s what we’ll see when we click the checkbox.

We can do the same thing with radio buttons.

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" v-model="selected" :value="apple" />
      <label>apple</label>
      <input type="radio" v-model="selected" :value="orange" />
      <label>orange</label>
      <p>{{ selected }}</p>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return { selected: "", apple: "apple", orange: "orange" };
        }
      }).mount("#app");
    </script>
  </body>
</html>

```

We dynamically bound the value with the `:value` directive instead of setting the value statically.

Since `v-model` of both radio buttons are set to the same value, we can select between them.

Then their value will be displayed.

### Conclusion

Many kinds of form controls work with the `v-model` directive.

Also, we can bind to their values in different ways.

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