表vue只是过滤分页的当前页面

Question

我有这个表与vue js。一切正常，但搜索字段只能过滤当前页面的数据，我想过滤考虑所有页面的分页。

表格在模板中描述，表格下方有分页。当我点击下一个按钮时，它会显示下一页，然后点击之前的页面返回上一页。

我使用axios来推送服务器的数据;

<template>
<div>
    <div class="row">
        <div class="col-md-1">
            Buscar:
        </div>
        <div class="col-md-11">
            <input type="text" class="form-control" placeholder="Digite algo.." v-model="search">
        </div>
    </div>
    <table class="table table-striped table-bordered table-hover">
        <thead>
            <tr>
                <th class="text-center">ID</th>
                <th class="text-center">Transaction</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="order in filteredOrders">

                <td class="text-center">{{ order.id }}</td>
                <td class="text-center">
                    {{ order.transaction_name }} of the {{ order.segment_name }}
                </td>
            </tr>
        </tbody>
    </table>
    <div class="row pull-right">
        <div class="col-lg-12 col-sm-12  m-t-25">
            <ul class="pagination pagination_padding_general_components">
                <li class="page-item active">
                    <a href="javascript:void" v-on:click="fetchPaginateOrders(pagination.prev_page_url)" :disabled="!pagination.prev_page_url">Anterior</a>
                </li>
                <li class="page-item">
                    <a href="#">Pagina {{pagination.current_page}} de {{pagination.last_page}}</a>
                </li>
                <li class="page-item active">
                    <a href="javascript:void" v-on:click="fetchPaginateOrders(pagination.next_page_url)" :disabled="!pagination.prev_page_url">Proxima</a>
                </li>
            </ul>
        </div>
    </div>
</div>
</template>
<script>
window.axios = require('axios');
var axios = require('axios');
    export default{
        data(){
            return{
                orders:[],
            search:'',
            pagination:[],
            url: "/admin/orders"
            }
        },
        mounted(){
            this.fetchOrders();
        },
        methods:{
            fetchOrders:function(){
                let $this = this
            axios
            .get(this.url)
            .then(response => {
                    this.orders = response.data.ordersPaginate.data;
                        this.makePagination(response.data.ordersPaginate.meta.pagination);

                });
            },
            makePagination:function(data){
                let pagination = {
                    current_page: data.current_page,
                    last_page: data.total_pages,
                    next_page_url: data.links.next,
                    prev_page_url: data.links.previous
                }
                this.pagination = pagination;
            },
            fetchPaginateOrders(url){
                this.url = url;
                this.fetchOrders();
            },
        },
        computed:
        {
            let result;

            filteredOrders(){
                result = this.orders.filter(order=>{
                return                  order.transaction_name.toLowerCase().indexOf(this.search.toLowerCase()) > -1 ||
                order.segment_name.toLowerCase().indexOf(this.search.toLowerCase()) > -1 
            });

                return result;
            }
        }
    }
</script>

服务器端处于laravel并使用Model::orderBy('id','des')->paginate(10)来获取数据