Vue 2.0 multiple keyup on button

Question

I have a problem with Vue, I have a code that run good @click, but I want to add keyboard handlers also. This is the code :

<section v-else class="row controls">
        <div class="small-12 columns">
          <button @click="playerAttack" @keyup.a="playerAttack" id="attack">
            ATTACK
          </button>
          <button @click="specialAttack" @keyup.s="specialAttack" id="special-attack">
            SPECIAL ATTACK <br />
            <span>Cooldown : {{ this.specialCooldown }}</span>
          </button>
          <button @click="playerHealing" @keyup.h="playerHealing" id="heal">
            HEAL <br />
            <span>Cooldown : {{ this.healingCooldown }}</span>
          </button>
          <button id="give-up">GIVE UP</button>
        </div>

The point is, on first button, 'Attack' in this case the keyup event works fine from start. Unfortunately the 'Special Attack' and 'Heal' doesn't, but... When I clicked on any of these two keyup event seems to change, and now 'Attack' is not working with the non clicked button 'Heal' f.e. but 'Special Attack' works fine, until I clicked on 'Attack' or 'Heal'. The keyup event are changing to fire last clicked button, and keyup is recognized correctly.

I don't think this is methods problem cause everything works fine @click and also @keyup when last-clicked button keyup event is invoked. Is it problem with code or I am not knowing some Vue specifics?

Answer 1

In JavaScript Events always origin from an element and bubble upwards through their parent elements. Keyup Events origin from the currently focused element.

Your event listeners only catch the keyup event if the button on which the listener is defined is focused.

To solve the problem you can try listening to keyup events on an element that encloses the buttons, e.g. the section element.

<section v-else class="row controls"
         @keyup.a="playerAttack"
         @keyup.s="specialAttack"
         @keyup.h="playerHealing">