What best way i can add more events to this span using the conditional operator-CodePudding

I have this code

<span
  role="link"
  tabindex="0"
  : 
  @click="tabDetails.showPayment ? cTab('payments') : null"
>

i also want to add the keyup@enter and keyup@space events to it, i am not sure how can i do it, any clues or idea?

CodePudding user response：

its should be like this:

<span
    role="link"
    tabindex="0"
    : 
    @click="tabDetails.showPayment ? cTab('payments') : null"

    @keyup.click="clickMethod()"
    @keyup.space="spaceMethod()"
>

CodePudding user response：

In Vue, we have separate event handler for enter and space key pressed. Hence, No need to use ternary operator for that. You can simply achieve that by using @keyup.enter & @keyup.space.

Live Demo :

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    onEnterKeyPressed() {
      // You can put your logic here
        console.log('Enter Key Pressed');
    },
    onSpaceKeyPressed() {
      // You can put your logic here
        console.log('Space Key Pressed');
    }    
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <span
  role="link"
  tabindex="0"
  @keyup.enter="onEnterKeyPressed"
  @keyup.space="onSpaceKeyPressed"
  >{{ message }}</span>
</div>