I have the following code in Vue which is working for the click events but not or the keyboard events:
<span v-show="show" @click.prevent="backTo" @keyup.enter="backTo" @keyup.space="backTo">
I have the backTo() method set up to go to the previous page, but when I use the keyboard events it does nothing. When clicked it is working fine.
I placed an alert in the method to understand what it is doing, but on the keyboard event it does nothing and onmouseclick I get the alert.
spans don't typically see keyboard events. Either change to a naturally editable element, or add tabindex="0" or add contenteditable=true
Vue.config.productionTip = false;
var app = new Vue({
el: '#app',
data: {
},
methods: {
backTo() {
alert('got here!');
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<span tabindex="0" @click.prevent="backTo" @keyup.enter="backTo" @keyup.space="backTo">Click on me to give me focus, then press space or enter</span>
</div>