Create a gist now

Instantly share code, notes, and snippets.

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 commented Jan 20, 2017 edited

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.

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 commented Jul 9, 2017

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

corean commented Sep 15, 2017

thanks @nathanjisaac for advice. I had already spent morning

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