按钮上的Vue 2.0多个键盘

Question

我有Vue的问题，我有一个运行良好的代码@click，但我也想添加键盘处理程序。这是代码：

<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>

关键是，在第一个按钮，'Attack'在这种情况下，keyup事件从开始就可以正常工作。不幸的是，'特殊攻击'和'治疗'没有，但是...当我点击这两个键盘事件中的任何一个时，似乎改变了，现在'攻击'不能使用未点击的按钮'治疗'f.e.但是'特殊攻击'工作正常，直到我点击'攻击'或'治疗'。 keyup事件正在更改为触发最后一次单击的按钮，并且正确识别了keyup。

我不认为这是问题的方法造成的一切工作正常@单击并在调用最后点击的按钮keyup事件也@keyup。它是用代码问题，或者我不知道一些具体的Vue？

Answer 1

在JavaScript活动总是从一个元件和气泡通过它们的父元素向上原点。 KEYUP活动起源从目前的焦点内容。

如果在其上定义监听器按钮的重点是你的事件监听器只赶上keyup事件。

要解决此问题，您可以尝试在包含按钮的元素上侦听键盘事件，例如部分元素。

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