键盘移动 Vuetify v-list-item答案

【问题标题】：键盘移动 Vuetify v-list-item
【发布时间】：2022-01-23 02:55:51
【问题描述】：

我有一个 Vuetify v-list-item 迭代创建我一个列表，我希望能够使用向上和向下箭头来遍历它。我怎样才能做到这一点？这似乎不是默认行为。

【问题讨论】：

【解决方案1】：

元素之间的默认聚焦行为通过tab 起作用。您可以尝试这样的方法来使用箭头键：

<template>
  <v-card
    class="mx-auto"
    max-width="300"
    tile
  >
    <v-list dense>
      <v-subheader>REPORTS</v-subheader>
      <v-list-item-group
        v-model="selectedItem"
        color="primary"
      >
        <v-list-item
          v-for="(item, i) in items"
          :key="i"
        >
          <v-list-item-icon>
            <v-icon v-text="item.icon"></v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title v-text="item.text"></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-card>
</template>
<script>
  export default {
    data: () => ({
      selectedItem: 1,
      items: [
        { text: 'Real-Time', icon: 'mdi-clock' },
        { text: 'Audience', icon: 'mdi-account' },
        { text: 'Conversions', icon: 'mdi-flag' },
      ],
    }),
    methods: {
        nextItem () {
            if (event.keyCode == 38 && this.selectedItem > 0) {
                this.selectedItem--
            } else if (event.keyCode== 40 && this.selectedItem < 3) {
                this.selectedItem++
            }
        }
    },
    mounted () {
        document.addEventListener("keyup", this.nextItem);
    },
  }
</script>

【讨论】：