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. | |
} | |
}); |
This comment has been minimized.
This comment has been minimized.
Thanks for the clean comment @nisaac2fly ! Really helped. |
This comment has been minimized.
This comment has been minimized.
I just spent a few hours trying to figure out why in the video tut "code" is used instead of "value". |
This comment has been minimized.
This comment has been minimized.
Thanks @nathanjisaac for explanation. Stuck on this for a few hours too. |
This comment has been minimized.
This comment has been minimized.
thanks @nathanjisaac for advice. I had already spent morning |
This comment has been minimized.
This comment has been minimized.
Awesome @nathanjisaac; now it makes sense! |
This comment has been minimized.
This comment has been minimized.
I spend an hour to try to use code instead of code. Maybe it's changed. Thanks for the comment @nathanjisaac |
This comment has been minimized.
This comment has been minimized.
@nathanjisaac you da man |
This comment has been minimized.
This comment has been minimized.
Thanks @nathanjisaac, It's work use a prop named |
This comment has been minimized.
This comment has been minimized.
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
This comment has been minimized.
I think this may have changed: https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events
You have to pass through a prop named
value
instead ofcode
.So the component should look like this now.