I'm learning Vue.js. In my Vue, I have a text field and a button. By default, this button submits a form when someone presses the Enter key on their keyboard. When someone is typing in the text field, I want to capture each key pressed. If the key is an '@' symbol, I want to do something special. If the key pressed is the "Enter" key, I want to do something special as well. The latter is the one giving me challenges. Currently, I have this Fiddle, which includes this code:
new Vue({
el: '#myApp',
data: {
emailAddress: '',
log: ''
},
methods: {
validateEmailAddress: function(e) {
if (e.keyCode === 13) {
alert('Enter was pressed');
} else if (e.keyCode === 50) {
alert('@ was pressed');
}
this.log += e.key;
},
postEmailAddress: function() {
this.log += '\n\nPosting';
}
});
In my example, I can't seem to press the "Enter" key without it submitting the form. Yet, I would expect the validateEmailAddress
function to at least fire first so that I could capture it. But, that does not seem to be happening. What am I doing wrong?
In vue 2, You can catch enter event with v-on:keyup.enter
check the documentation:
I leave a very simple example:
var vm = new Vue({
el: '#app',
data: {msg: ''},
methods: {
onEnter: function() {
this.msg = 'on enter event';
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<input v-on:keyup.enter="onEnter" />
<h1>{{ msg }}</h1>
</div>
Good luck