Skip to content

Instantly share code, notes, and snippets.

@hrmsk66

hrmsk66/customInput.js

Created May 9, 2018 02:11
Show Gist options
  • Save hrmsk66/d35bd7ae09c93041ee333e3944fbd08a to your computer and use it in GitHub Desktop.
Save hrmsk66/d35bd7ae09c93041ee333e3944fbd08a to your computer and use it in GitHub Desktop.
Download ZIP
Vue Custom Input
Raw
customInput.js
Vue.component('coupon', {
props: ['value'],
template: `
<input type="text" class="input" :value="value" @input="updateCode($event.target.value)" ref="input">
`,
data() {
return {
invalids: ['ALLFREE', 'SOMETHINGELSE']
}
},
methods: {
updateCode(code) {
if (this.invalids.includes(code)) {
alert('This coupon is no longer valid')
this.$refs.input.value = code = ''
}
this.$emit('input', code)
}
}
})
new Vue({
el: '#app',
data: {
coupon: ''
}
})
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<style>body { margin-top: 40px; margin-left: 40px; }</style>
</head>
<body>
<div id="app">
<h1>Hello, World</h1>
<!-- <input type="text" class="input" :value="coupon" @input="coupon = $event.target.value"> -->
<coupon v-model="coupon">
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="/js/app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment