如何使用箭头进行上下切换？Vue

data() {
  return {
    selectedIdx: 0
  }
}

<template>
  <div>
    <div v-for="(item, index) in items" :key="index" :class="{ 'selected': selectedIdx === index }">
      {{ item }}
    </div>
  </div>
</template>

methods: {
  handleArrowKeys(event) {
    if (event.keyCode === 38) { // 上箭头
      this.selectedIdx = Math.max(0, this.selectedIdx - 1);
    } else if (event.keyCode === 40) { // 下箭头
      this.selectedIdx = Math.min(this.items.length - 1, this.selectedIdx + 1);
    }
  }
}

mounted() {
  document.addEventListener('keydown', this.handleArrowKeys);
}

beforeDestroy() {
  document.removeEventListener('keydown', this.handleArrowKeys);
}