Vue 3 — v-model Modifiers and Components
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:24:00

---
title: Vue 3 — v-model Modifiers and Components
published: true
date: 2020-07-26 01:36:00 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/26/vue-3%e2%80%8a-%e2%80%8av-model-modifiers-and-components-2/?utm_source=rss&utm_medium=rss&utm_campaign=vue-3%25e2%2580%258a-%25e2%2580%258av-model-modifiers-and-components-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 and create simple Vue 3 components.

### Select Options

Select option values can be objects.

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 :value="{ fruiit: 'apple' }">apple</option>
        <option :value="{ fruiit: 'orange' }">orange</option>
        <option :value="{ fruiit: 'grape' }">grape</option>
      </select>
      <p>{{ selected }}</p>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return { selected: {} };
        }
      }).mount("#app");
    </script>
  </body>
</html>

```

to create a select dropdown that has option values bound to objects.

`:value` accepts an object.

So when we select a value, we’ll see that `selected` would also be an object.

This is because we set `v-model` ‘s value to `selected` .

### v-model Modifiers

`v-model` can take various modifiers.

#### .lazy

The `.lazy` modifier makes `v-model` sync with the Vue instance state after each `change` event.

By default, `v-model` syncs with the state after each `input` event is emitted.

We can use that by writing:

```
<input v-model.lazy="msg" />

```

#### `.number`

The `.number` modifier lets us convert whatever is entered to a number automatically.

For instance, we can write:

```
<input v-model.number="numApples" type="number" />

```

to convert `numApples` to a number automatically.

By default, an HTML input’s value is always a string, so this is a useful shorthand.

If the value can’t be parsed with `parseFloat` , then the original value is returned.

#### `.trim`

The `.trim` modifier automatically trims whitespace from user inputs.

We can use it by writing:

```
<input v-model.trim="msg" />

```

### `v-model` with Components

`v-model` can be used with components as long as it emits an `input` event and takes in a `value` prop to populate the form control’s value.

This lets us make custom form control components easily.

### Components Basics

We can create Vue components with the `app.component` method.

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">
      <button-counter />
    </div>
    <script>
      const app = Vue.createApp({});

      app.component("button-counter", {
        data() {
          return {
            count: 0
          };
        },
        template: `
          <div>
            <button @click="count++">
              increment
            </button>
            <p>{{ count }}</p>
          </div>
        `
      });

      app.mount("#app");
    </script>
  </body>
</html>

```

to create a component and then use it in our app.

We called `app.component` to with the component name as the first argument.

We called our component `'button-counter'` .

The 2nd argument has the component object with the template and logic.

`data` returns the initial state object.

And `template` has the template string with the elements we want to display.

Inside it, we increment the `count` when a button is clicked and display the `count` .

Then we use the `button-counter` component in our app by adding the HTML for it.

Now we should see the increment button and the `count` value update as we click it.

### Conclusion

`v-model` works with select options and components.

We can create simple components with the `app.component` method.

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