n Adding v-model Support to Custom Vue.js Components | CodimTh

Please Disable Your Browser Adblock Extension for our site and Refresh This Page!

our ads are user friendly, we do not serve popup ads. We serve responsible ads!

Refresh Page
Skip to main content
On . By CodimTh

Custom events can also be used to create custom inputs that work with v-model. Remember that:

<input v-model="searchText">

does the same thing as:

  v-on:input="searchText = $event.target.value"

When used on a component, v-model instead does this:

  v-on:input="searchText = $event"



Say you have a date picker component that accepts a month and a year value in an object with the form: {month: 1, year: 2017}. You want that component to have two inputs, one for the month and one for the year, and update the bound object through v-model. Here’s how you would implement that.


  <div class="date-picker">
    Month: <input type="number" ref="monthPicker" :value="value.month" @input="updateDate()"/>
    Year: <input type="number" ref="yearPicker" :value="value.year" @input="updateDate()"/>

export default {
  props: ['value'],

  methods: {
    updateDate() {
      this.$emit('input', {
        month: +this.$refs.monthPicker.value,
        year: +this.$refs.yearPicker.value


And here’s how another component would use the date picker:


  <div class="wrapper">
    <date-picker v-model="date"></date-picker>
      Month: {{date.month}}
      Year: {{date.year}}

import DatePicker from './DatePicker.vue';

export default {
  components: {

  data() {
    return {
      date: {
        month: 1,
        year: 2017


As you can see, it simply takes a :value property and emits an @input event with the updated date. Nothing too complicated at all!

Riadh Rahmi

Senior Web Developer PHP/Drupal & Laravel

I am a senior web developer, I have experience in planning and developing large scale dynamic web solutions especially in Drupal & Laravel.

Web Posts


Page Facebook