分页和过滤器分别运行/Vue

Question

我获取数据并对其进行分页，这没有问题。但是当我尝试过滤数据时，分页不适用于过滤后的数据。仍在底部显示下一页。当我去（例如）第 2 页时，第二页中没有数据。因为我已经过滤了。我该如何解决这个问题？谢谢！

索引组件

Data(){
    meta_data: {
          last_page: null,
          current_page: 1,
          prev_page_url: null
     }
},
methods: {
    fetchEstates(page = 1){
        axios.get('/ajax', {
            params: {
                page
            }}).then((response) => {
                // console.log(response);
                this.estates = response.data.data;
                this.insertMarkers();
                this.meta_data.last_page = response.data.last_page;
                this.meta_data.current_page = response.data.current_page;
                this.meta_data.prev_page_url = response.data.prev_page_url;
        });
    },
},

computed: {
    one: function () {
        let filteredStates = this.estates.filter((estate) => {
            return (this.keyword.length === 0 || estate.address.includes(this.keyword)) &&
            (this.rooms.length === 0 || this.rooms.includes(estate.rooms)) &&
            (this.regions.length === 0 || this.regions.includes(estate.region))});

            if(this.sortType == 'price') {
                filteredStates = filteredStates.sort((prev, curr) => prev.price - curr.price);
            }
            if(this.sortType == 'created_at') {
                filteredStates = filteredStates.sort((prev, curr) => Date.parse(curr.created_at) - Date.parse(prev.created_at));
            }

            filteredStates = filteredStates.filter((estate) => { return estate.price <= this.slider.value});
            filteredStates = filteredStates.filter((estate) => { return estate.extend <= this.sliderX.value});
            filteredStates = filteredStates.filter((estate) => { return estate.m2_price <= this.sliderT.value});

            return filteredStates;
    },
}

<pagination
      :meta_data="meta_data"
      v-on:next="fetchEstates">
</pagination>

分页组件

    props: ['meta_data'],
    methods: {
        next(page) {
            this.$emit('next', page);
        }
    }
}

    <nav>
         <ul class="pagination pagination-lg">
             <li class="page-item"
                 :class="{ 'disabled': meta_data.prev_page_url === null }">
                 <a href="#"
                     class="page-link"
                     @click="next(meta_data.current_page-1)">
                     &laquo;
                 </a>
             </li>
             <li class="page-item"
                 v-for="page in meta_data.last_page"
                 :key="page"
                 :class="{ 'active':meta_data.current_page === page }">
                 <a href="#"
                     @click.prevent="next(page)"
                     class="page-link">
                     {{ page }}
                 </a>
             </li>
             <li class="page-item"
                 :class="{ 'disabled': meta_data.current_page === meta_data.last_page }">
                <a  href="#"
                     class="page-link"
                     @click="next(meta_data.current_page+1)">
                     &raquo;
                </a>
             </li>
        </ul>
    </nav>