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.
    }
});

I think this may have changed: https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events

So for a component to work with v-model, it must:

• accept a value prop
• emit an input event with the new value

You have to pass through a prop named value instead of code.

So the component should look like this now.

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

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

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

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

I think this may have changed: https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events

So for a component to work with v-model, it must:

• accept a value prop
• emit an input event with the new value

You have to pass through a prop named value instead of code.

So the component should look like this now.

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

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

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

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

Thanks for the clean comment @nisaac2fly ! Really helped.

Thanks for the clean comment @nisaac2fly ! Really helped.

I just spent a few hours trying to figure out why in the video tut "code" is used instead of "value".
Thanks nathanjisaac you saved me some hair pulling :)

I just spent a few hours trying to figure out why in the video tut "code" is used instead of "value".
Thanks nathanjisaac you saved me some hair pulling :)

Thanks @nathanjisaac for explanation. Stuck on this for a few hours too.

Thanks @nathanjisaac for explanation. Stuck on this for a few hours too.

thanks @nathanjisaac for advice. I had already spent morning

thanks @nathanjisaac for advice. I had already spent morning

Awesome @nathanjisaac; now it makes sense!

Awesome @nathanjisaac; now it makes sense!

I spend an hour to try to use code instead of code. Maybe it's changed. Thanks for the comment @nathanjisaac

I spend an hour to try to use code instead of code. Maybe it's changed. Thanks for the comment @nathanjisaac

@nathanjisaac you da man

@nathanjisaac you da man

Thanks @nathanjisaac, It's work use a prop named value instead of code.

Thanks @nathanjisaac, It's work use a prop named value instead of code.

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

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