Question

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

我让sandbox让你查看发生了什么。如果我不使用 Vue

，它会工作

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

无法读取null
的属性'focus'

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>

Answer 2

为什么不采用数据驱动的方法呢？

你有一系列的物品。您可以在每个项目上设置有效属性，并将其切换为PodamFactory factory = new PodamFactoryImpl(); Person myPojo = factory.manufacturePojo(Person.class);或true。

您的向上和向下键将更改数组指针并将当前指针项设置为true。这样您就不必进行任何DOM选择。

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

2 个答案: