Instantly share code, notes, and snippets.

Embed
What would you like to do?
vuecasts.com - Custom Input Components exercise.
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.
}
});
@nathanjisaac

This comment has been minimized.

Show comment
Hide comment
@nathanjisaac

nathanjisaac Jan 20, 2017

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

nathanjisaac commented Jan 20, 2017

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);
        }
    }
});
@rdok-pigogo

This comment has been minimized.

Show comment
Hide comment
@rdok-pigogo

rdok-pigogo Mar 9, 2017

Thanks for the clean comment @nisaac2fly ! Really helped.

rdok-pigogo commented Mar 9, 2017

Thanks for the clean comment @nisaac2fly ! Really helped.

@paulous

This comment has been minimized.

Show comment
Hide comment
@paulous

paulous May 2, 2017

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 :)

paulous commented May 2, 2017

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 :)

@prapats

This comment has been minimized.

Show comment
Hide comment
@prapats

prapats Jul 9, 2017

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

prapats commented Jul 9, 2017

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

@corean

This comment has been minimized.

Show comment
Hide comment
@corean

corean Sep 15, 2017

thanks @nathanjisaac for advice. I had already spent morning

corean commented Sep 15, 2017

thanks @nathanjisaac for advice. I had already spent morning

@snapjay

This comment has been minimized.

Show comment
Hide comment
@snapjay

snapjay Oct 26, 2017

Awesome @nathanjisaac; now it makes sense!

snapjay commented Oct 26, 2017

Awesome @nathanjisaac; now it makes sense!

@Huuphuoc19

This comment has been minimized.

Show comment
Hide comment
@Huuphuoc19

Huuphuoc19 Dec 16, 2017

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

Huuphuoc19 commented Dec 16, 2017

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

@mokhosh

This comment has been minimized.

Show comment
Hide comment
@mokhosh

mokhosh commented Feb 18, 2018

@nathanjisaac you da man

@ariefadjie

This comment has been minimized.

Show comment
Hide comment
@ariefadjie

ariefadjie Apr 16, 2018

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

ariefadjie commented Apr 16, 2018

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

@inuk66

This comment has been minimized.

Show comment
Hide comment
@inuk66

inuk66 Aug 14, 2018

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

inuk66 commented Aug 14, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment