I'm trying to get the input value on keyup using Vuejs 2 but always get an empty result like the data. Please see code below.
HTML:
<input type="email" @keyup="this.$data.email= $event.target.value" class="form-control" id="email" placeholder="Username (your work email)">
<button type="button" class="btn btn-primary btn-block inactive" @click="submit">Log in</button>
Script:
data () {
return {
email: '',
}
},
methods: {
submit () {
alert(this.$data.email)
}
}
You need to reference email (not this.$data.email):
<input type="email" @keyup="email = $event.target.value" class="form-control" id="email" placeholder="Username (your work email)">
But also, why not use v-model to bind email to the input?
new Vue({
el: '#app',
data () {
return {
email: '',
}
},
methods: {
submit () {
alert(this.email)
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<input type="email" v-model="email" class="form-control" id="email" placeholder="Username (your work email)">
<button type="button" class="btn btn-primary btn-block inactive" @click="submit">Log in</button>
</div>
@keyup.enter.native="submitMETHOD"
