如何使用vue和vuetify在卡上的keyup事件中获取下一个对象值

Question

更新：

我意识到我的组件需要包装在div中，然后添加了以下代码：

<div @keyup.down="keyFire(1)" @keyup.up="keyFire(-1)">
  <multiple-cards
    v-for="(card, i) in multiCards"
    :card="card"
    :i="i"
    @click.native="activateCard(card, i)"
    tabindex="0"
    ref="cards"
    >
    </multiple-cards>
</div>

  keyFire(iterator) {
    const currentActive = this.cardActive;
    const newIdx = currentActive + iterator;
    const newCard = this.multiCards[newIdx];
    this.activateCard(newCard, newIdx);
  }

然后我遇到了一个问题，由于我的逻辑，第一张卡没有集中到用户只能使用箭头键的位置，所以我最终做了

this.$refs.cards[0].$el.focus();

---

原始问题：

我有一个Vue组件，它是Vuetify卡的v-for循环。 我正在尝试使用@keyup事件侦听器通过箭头键在卡上上下移动。 如果我执行全局事件侦听器，则可以获取keyup和down事件，但这对我没有帮助，因为它似乎不知道哪个卡索引在其上或在哪个位置向上或向下移动。 我已经尝试过@ keyup.native.up，@ keyup.native.down和没有.native的版本

这是一个显示基本问题的codepen： https ://codepen.io/AleaQ/pen/rdGxEz

实际的代码看起来像这样：

父组件

<multiple-cards
v-for="(card, i) in multiCards"
:card="card"
:i="i"
@click.native="activateCard(card, i)"
@keyup.native="activateCard"
>
</multiple-cards>

子组件：

<v-card
id="mCard"
:class="{'border', cardActive}"
>
</v-card>

事件监听器：

mounted() {
window.addEventListener('keyup', this.activateCard)
}

我知道Vuetify的卡片组件上没有监听器，所以我不确定这是否是自动交易破坏者，或者是否有其他方法可以通过纯JavaScript来实现。 我不能使用JQuery。

Answer 1

您仅在将“卡片”发送到click方法时尝试引用一个事件。 用一些注释解释了我添加的内容， 从而修改了Codepen 。

最值得注意的是，我通过模板中的keyup事件传递了该事件

 <div v-for="(card, i) in objData" :key="i" @keyup="eventListenCard(card, event)" @click="showCurrObj(card)" tabindex="0" id="answerCard" ref="cards" > 

然后在eventListen方法中，我使用事件的目标来获取要聚焦的下一个元素。

eventListen(val, event) {
    ...
    event.target.nextElementSibling.focus();
    ...
}