How to Add v-model to Custom Components in Vue 2 (Easy)

To receive the values from HTML form elements we use the v-model directive in Vue 2. It is a directive that comes with Vue.

You can apply this directive to any type of input field, select, or textarea in HTML.

The v-model helps us to bind an HTML form element with a variable so that if someone enters something in that input element, the value automatically gets stored in that variable.

It also works in opposite direction. If you set a default value to that variable then the input element also shows the default value. This process is knowns as two-way data binding.

The v-model directive is not limited to just HTML form elements. You can add v-model to custom components as well.

In this article, I will show you how you can add v-model to custom components in Vue 2.

If you are using Vue 3, you can follow our other post where I have shown the best way to use v-model to components in Vue 3.

But to follow this article you must have basic knowledge of Vue 2, HTML input, and form elements, and you should also know about Vue directives.

Why Use v-model to Custom Components

If we can use v-model with any HTML input fields then why do we need to add support for this directive to a component?

One of the main reasons we use Vue or any frontend framework is to make the development process simple. We can do that by creating small reusable sections of our application.

That is why often we need to receive value from an input field that is present in another component. This is where we need to add v-model to our components.

How Does v-model Work in Vue 2?

We need to know, how v-model directive works internally to add this to our components.

When we use v-model directive to an input field, Vue does two things behind the scene. It binds the value attribute of that input field and adds @input event.

          <input type="text" v-model="title" />

<!-- Similar to this -->
<input type="text" :value="title" @input="updateValue" />
        

Whenever a user enters something in the field that event fires and Vue updates the input value as well as updates the title variable.

How to Add v-model to Custom Components in Vue 2

First, you have to create a component in your Vue 2 project. I have created a BaseInput.vue component. You can name it anything you want.

          <!-- BaseInput.vue component -->

<template>
    <div>
        <input type="text" :value="value" @input="updateValue" />
    </div>
</template>

<script>
export default {
    name: 'BaseInput',
    props: ['value'],
    methods: {
        updateValue(event) {
            this.$emit('input', event.target.value)
        }
    },
}
</script>
        

In the template section, I have used the input element. you can use any form element like checkbox, radio button, select, etc.

In this component, Vue 2 will send a prop with a name value automatically when you attach v-model to it. You have to bind the value attribute in the input field with this prop.

Finally, add an @input event to that input field that will run a function called updateValue. You can name this function whatever you want.

From this function, you must emit a custom event. The name of the event must be input because by default Vue 2 waits for this event.

Note: I will how you how you can change the default prop name and event name in the next section.

That's it, your component is ready to use.

          <!-- App.vue component -->

<base-input v-model="title"></base-input>
        

Now you can import and use the BaseInput.vue component inside any other components and use v-model with it.

Here, title is a variable that is present in App component. When a user enters something in the input field, this variable will store the value.

If you set any default value to this variable, the input field will show the default value.

How to Change v-model Default Prop and Event Names in Vue 2

You can customize the default prop value that passes by Vue 2 and the event input that Vue 2 listens to.

If you don't want to use the default names, you can change those names according to your need.

          <!-- BaseInput.vue component -->

<template>
    <div>
        <input type="text" :value="title" @input="updateValue" />
    </div>
</template>

<script>
export default {
    name: 'BaseInput',
    props: ['title'],
    model: {
        prop: 'title',
        event: 'changeTitle'
    },
    methods: {
        updateValue(event) {
            this.$emit('changeTitle', event.target.value)
        }
    },
}
</script>
        

In the previous example, we added a prop called value. This time we will change the name to title and as event name, we will use changeTitle instead of input. You can use any name.

To make them work, we have to add an object called model inside our <script> tag. This object contains two properties.

One is prop where we have to mention our custom prop name that is title and another property is event where we have to set our custom event name that is changeTitle in our case.

Note: You have to mention title in props and in model object.

That's it. Now you can bind your custom prop name with :value="" in an input field and emit a custom event from the component.

          <!-- App.vue component -->

<base-input v-model="title"></base-input>
        

You can also use BaseInput.vue component in a similar way as you did in the previous example.

Conclusion

This is an easy and quick way to add v-model support to a component. You can customize the default settings as well.

Now you know how to add v-model to custom components in Vue 2. I hope that you will be able to use this in your Vue 2 projects.