vue3 搜索关键字筛选列表时 列表有分页 搜索到的在第二页的内容只显示在第二页 怎么让搜索到的内容重新进行分页显示在第一页

在Vue3中，当你在有分页功能的列表上进行关键字搜索时，如果搜索结果跨越了页面，你需要更新搜索状态并同步页面。这通常涉及到以下几个步骤：

1. **处理搜索事件**: 当用户输入搜索关键字时，监听搜索输入的变化。例如，你可以使用`v-model`绑定到一个计算属性，然后在这个计算属性内部处理搜索逻辑。

<template>
  <div>
    <input v-model="searchKeyword" @input="search" />
    <pagination :items-per-page="perPage" :current-page.sync="currentPage" />
    <list :items="filteredItems" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      currentPage: 1,
      perPage: 10, // 分页大小
      filteredItems: [], // 初始化为空的搜索结果数组
    };
  },
  computed: {
    ...mapState(['totalItems']), // 如果需要获取总数据量用于判断是否翻页
  },
  methods: {
    async search() {
      const items = this.filteredList; // 获取过滤后的列表
      if (items.length === 0) {
        this.currentPage = 1; // 如果无搜索结果，返回第一页
      } else {
        const startIndex = (this.currentPage - 1) * this.perPage;
        const endIndex = startIndex + this.perPage;
        const slicedItems = items.slice(startIndex, endIndex); // 取当前页范围内的结果

        // 更新filteredItems，并根据实际情况调整currentPage
        this.filteredItems = slicedItems;
        if (slicedItems.length < this.perPage && this.totalItems <= slicedItems.length) {
          this.currentPage = Math.ceil(this.totalItems / this.perPage);
        }
      }
    },
  },
};
</script>

2. **保持分页同步**: `:current-page.sync="currentPage"` 这个绑定会实时更新视图的当前页，当`search`方法改变`currentPage`时，搜索结果就会对应地展示在新的页面上。

**相关问题--:**
1. Vue3中如何监听组件状态变化以便于做搜索操作？
2. 使用Vuex管理全局状态的情况下，如何更新分页和搜索结果？
3. 如何避免在多次连续搜索时频繁触发页面切换？