[Vuejs]-Why don't my Vue keyup event properties work?

by

1👍

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!');
    },
    backToA() {
      alert('got here from anchor!');
    }
  }
})
<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>
  <br/>
  <a href="#" tabindex="0" @click.prevent="backToA" @keyup.enter="backToA" @keyup.space="backToA">Same thing in an anchor tag</a>

</div>
👤danh

Leave a comment