在Vue中使用箭头键选择div元素

Question

我正在尝试使用箭头键浏览 div 元素。我知道如何在 JavaScript 中实现它，但是我正在努力做到“vue 方式”。我知道不应该有任何差异，但它根本不起作用。

我已经为你制作了沙箱来检查发生了什么。如果我不使用Vue，它就可以工作

在 Vue 中，由于这一行，我收到以下错误：

无法读取 null 的属性“焦点”

document.activeElement.parentNode.previousSibling.firstChild.focus();

谁能告诉我我做错了什么？是v-for错误来源还是有其他问题？

Answer 1

这真的取决于你为什么需要一个focus. 如果只是为了突出显示某些内容，您可以使用辅助变量来跟踪您当前突出显示的内容并为其添加一个类

https://codesandbox.io/s/300vxzkyk5

<template>
  <div>
    <input ref="input" type="text" @keydown="test" tabindex="0">
    <div ref="test" v-for="item, index in items" :class="{ focus: index === focus }">
       <div>{{ item.title }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { title: "First" },
        { title: "Second" },
        { title: "Third" }
      ],
      focus: null
    };
  },
  methods: {
    test: function(event) {
      switch (event.keyCode) {
        case 38:
          if (this.focus === null) {
            this.focus = 0;
          } else if (this.focus > 0) {
            this.focus--;
          }
          break;
        case 40:
          if (this.focus === null) {
            this.focus = 0;
          } else if (this.focus < this.items.length - 1) {
            this.focus++;
          }
          break;
      }
    }
  }
};
</script>

<style>
div.focus {
  border: 1px solid blue;
}
</style>