Vuejs:如何使用prev / next在突出显示的搜索词之间循环

<template>
  <div>
    <input v-model="searchText" type="text" placeholder="搜索">
    <ul>
      <li v-for="(item, index) in highlightedSearchTexts" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="prev">上一个</button>
    <button @click="next">下一个</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '', // 输入的搜索词
      searchWords: [], // 搜索词分割后的数组
      currentIndex: 0 // 当前突出显示的搜索词索引
    };
  },
  computed: {
    highlightedSearchTexts() {
      // 将搜索词分割为数组
      this.searchWords = this.searchText.split(' ');

      // 确保当前索引不越界
      if (this.currentIndex >= this.searchWords.length) {
        this.currentIndex = 0;
      }

      // 返回突出显示的搜索词数组
      return this.searchWords.map((word, index) => {
        if (index === this.currentIndex) {
          return `【${word}】`;
        } else {
          return word;
        }
      });
    }
  },
  methods: {
    prev() {
      // 切换到上一个搜索词
      this.currentIndex--;
    },
    next() {
      // 切换到下一个搜索词
      this.currentIndex++;
    }
  }
};
</script>