Javascript 使用V-For为按钮动态分配键代码

我的目标是复制键盘友好表单提供的功能（参见问题2）。我想使用v-for（easy）生成问题的潜在答案列表，并为每个答案分配一个键码，该键码将字母绑定到每个按钮（可能？）

我有两个问题：

是否可以使用v-for为列表分配键代码？（我无法预测一个问题的可能答案数量，可能是2+左右。）

以下尝试均无效：

@keydown.：button.key
：@keydown.button.key
@keydown.{{button.key}}

如何使此按键功能在全球范围内工作？它现在工作的唯一方法是，你按下按钮，使它当前处于焦点，然后按下硬编码的键

小提琴：

您可以处理键盘事件，存储结果，并在列表中使用已处理的键匹配元素索引：

<button class="query-input" type="button"
    v-for="(button, index) in questions.attrs"
    @click="answer(button.id, button.name)"
    :class="{ 'selected': index === selected}"
  >{{button.key}} {{ button.name }}</button>

---

示例：

这样就可以了，非常感谢！将事件侦听器添加到窗口是缺少的问题#2。至于processKeydown（e）函数，它看起来很神奇，但我会一直玩到它有意义为止。@Scott，

beforeDestroy

应该自动调用（我不确定是否需要

removeEventListener

，或者Vue只是删除事件）。和

String.fromCharCode（key.charCodeAt（0）+1）我找到的部分。
methods: {
  processKeydown(e) {
    var key = 'a';
    for (let i = 0; key !== 'z'; i++) {
      if (e.key === key) {
        this.$set(this, 'selected', i);
        break;
      }
      key = String.fromCharCode(key.charCodeAt(0) + 1);
    }
  },
},
mounted() {
  window.addEventListener('keydown', this.processKeydown);
},
beforeDestroy() {
  window.removeEventListener('keydown', this.processKeydown);
},