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

当您只发送＆＃34;卡时，您试图引用该事件＆＃34;到click方法。修改了您的codepen，其中包含一些解释我已添加内容的评论。

很明显，我通过模板中的keyup事件传递了事件

＆＃13;

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

＆＃13;

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

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

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

1 个答案: