vuecasts.com - Custom Input Components exercise.

vue-custom-input-component-exercise.js

Vue.component('coupon', {
    props: ['code'],

    template: `
        <input type="text"
               :value="code"
               @input="updateCode($event.target.value)"
               ref="input">
    `,

    methods: {
        updateCode(code) {
            // Atttach validation + sanitization here.

            this.$emit('input', code);
        }
    }
});


new Vue({
    el: '#app',

    data: {
        coupon: 'FREEBIE' // Maybe from DB or querystring.
    }
});

The original component should also work with just a small modification:

Vue.component('coupon', {
    // New.
    model: {
        prop: 'code'
    },

    props: ['code'],

    template: `
        <input type="text"
               :value="code"
               @input="updateCode($event.target.value)"
               ref="input">
    `,

    methods: {
        updateCode(code) {
            // Atttach validation + sanitization here.

            this.$emit('input', code);
        }
    }
});

https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model