Vue -如何显示被单击的项和数组的上一项/下一项

data() {
  return {
    items: ['item1', 'item2', 'item3', 'item4'],
    selectedIndex: null
  }
}

<ul>
  <li v-for="(item, index) in items" :key="index" @click="selectedIndex = index">{{ item }}</li>
</ul>

computed: {
  selectedItem() {
    if (this.selectedIndex !== null) {
      return this.items[this.selectedIndex];
    }
    return null;
  },
  previousItem() {
    if (this.selectedIndex !== null && this.selectedIndex > 0) {
      return this.items[this.selectedIndex - 1];
    }
    return null;
  },
  nextItem() {
    if (this.selectedIndex !== null && this.selectedIndex < this.items.length - 1) {
      return this.items[this.selectedIndex + 1];
    }
    return null;
  }
}

<div>
  <p>被单击的项：{{ selectedItem }}</p>
  <p>上一项：{{ previousItem }}</p>
  <p>下一项：{{ nextItem }}</p>
</div>