Skip to content

Instantly share code, notes, and snippets.

@laracasts

laracasts/vue-custom-input-component-exercise.js

Created January 9, 2017 18:16
Show Gist options
  • Save laracasts/37117786ec23bfacf391d81c2cefa35b to your computer and use it in GitHub Desktop.
Save laracasts/37117786ec23bfacf391d81c2cefa35b to your computer and use it in GitHub Desktop.
Download ZIP
vuecasts.com - Custom Input Components exercise.
Raw
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.
}
});
@prapats
Copy link

prapats commented Jul 9, 2017

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

@corean
Copy link

corean commented Sep 15, 2017

thanks @nathanjisaac for advice. I had already spent morning

@snapjay
Copy link

snapjay commented Oct 26, 2017

Awesome @nathanjisaac; now it makes sense!

@phuocph
Copy link

phuocph 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
Copy link

mokhosh commented Feb 18, 2018

@nathanjisaac you da man

@ariefadjie
Copy link

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

@inuk66
Copy link

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