Filter data with laravel-vue-pagination

I'm trying to filter data by name in a table like

 <form @submit.prevent="search" @keydown="form.onKeydown($event)">
            <div class="form-group">
             <label>Name</label>
            <input name="name" v-model="form.amount" placeholder="Enter Name">
            </div>
        </form>
    
    
    
        <div class="card-body p-0">
                  <table class="table table-striped">
                <thead>
                  <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Amount</th>
                    <th scope="col">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  <table-row @listRemoved="removeList" v-for="(list, index) in UserData.data" :list="list" :index="index" :key="list.id"></table-row>
                </tbody>
              </table>
                </div>
                <div class="card-footer">
                      <pagination :data="UserData" @pagination-change-page="getResults">
                        <span slot="prev-nav">&lt; Previous</span>
                        <span slot="next-nav">Next &gt;</span>
                      </pagination>
                  </div>
              </div>
            </div>
        
         data(){
              return {
                UserData: {},
                form: new Form({
                  name: '',
                }),
              }
            },
 mounted(){
       this.loadAllData();
    },
 loadAllData(){
       const header = {
              'Authorization': 'Bearer ' + this.getLoginUserData,
         };
        axios.get("/api/user",{headers: header}).then(({ data }) => (this.userData = data));
      },
 search(){
         this.form.post(`/api/search-user`,{headers: this.header()}).then((response) =>{
            this.userData = null;
            this.userData = response.data;
          })
      },
 getResults(page){
       const header = {
              'Authorization': 'Bearer ' + this.getLoginUserData,
         };
        axios.get('/api/user?page=' + page , {headers: header})
                .then(response => {
                    this.userData = response.data;
                });
      },

Controller:

public function index(){
        $user = User::paginate(5);
        return response()->json($user,200);
    }

 public function search(Request $request)
    {
        $user = User::where('name','LIKE',"%{$request->name}%")->paginate(5);
        return response()->json($user,200);
    }

on mounted event loadAllData event is called which loads all data through index function of controller and when i search then the filtered data is searched through search method. But when i click on pagination links then it shows all the unfiltered data i.e. complete result without filter. But i also want pagination to work on searched data.

Any help is highly appreciated.

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2MrDGS2
via IFTTT