如何使用ramda和vue对过滤后的数据进行分页

data() {
  return {
    rawData: [], // 原始数据
    filteredData: [], // 过滤后的数据
    currentPage: 1, // 当前页码
    pageSize: 10, // 每页显示的数据量
  };
},

methods: {
  // 过滤数据
  filterData() {
    this.filteredData = R.filter(/* 过滤条件 */)(this.rawData);
    this.currentPage = 1; // 过滤后重置当前页码为第一页
  },
  
  // 获取当前页的数据
  getCurrentPageData() {
    const startIndex = (this.currentPage - 1) * this.pageSize;
    const endIndex = startIndex + this.pageSize;
    return R.slice(startIndex, endIndex)(this.filteredData);
  },
  
  // 切换页码
  changePage(page) {
    this.currentPage = page;
  },
},

<template>
  <div>
    <!-- 过滤条件输入框 -->
    <input type="text" v-model="filterCondition" @input="filterData" />
    
    <!-- 过滤后的数据 -->
    <ul>
      <li v-for="item in getCurrentPageData()" :key="item.id">{{ item.name }}</li>
    </ul>
    
    <!-- 分页组件 -->
    <div>
      <button v-for="page in totalPages" :key="page" @click="changePage(page)">{{ page }}</button>
    </div>
  </div>
</template>