Question

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

我有两个问题：

是否可以使用v-for将密钥代码分配给列表？（我无法预测问题的可能答案数量，可能是2 +的任何答案。）

以下尝试都不起作用：

@keydown.:button.key :@keydown.button.key @keydown.{{button.key}}

如何使此keydown功能全局运行？它现在唯一可行的方法是，如果你选中按钮使它当前处于焦点，然后按下硬编码的键。

Answer 1

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

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

您可以在安装组件时注册键盘事件处理功能：

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);
},

示例：JSFiddle snippet

使用V-For动态地将键码分配给按钮

1 个答案: