Name: Vue 3 — v-model
Rating: 2.2 (7303 reviews)
Author: aumayeung

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 appeared first on The Web Dev.