How to work with computed properties

[vipin882]

Hi,
By default the pagination is working properly but when i try using a category dropdown to filter the data with computed properties . I have lot of blank pages in between and getting the extact result.

This is my code

<template>
    <div class="container">
      <div class="row selbx">
            <input type="text" class="form-control" @input="isTyping = true" v-model="searchQuery" placeholder="Search Document">
       
        <label for="">Select Category</label>
      <select name="template" v-model="category">
           <option value="">All</option>
                                        <option v-for="cat in categories" :key="cat.id" :value="cat.id">
                                        {{ cat.categories }}
                                        </option>
                                    </select>
<label for="">Document Type</label>
      <select v-model="doctype">
         <option value="">All</option>
                                        <option v-for="type in types" :key="type.id" :value="type.id">
                                        {{ type.name }}
                                        </option>
                                    </select>                                   
      </div>
      <br>
    <div class="row">
            <div class="col-md-12">
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
       <th scope="col">Document Name</th>
       <th scope="col">Document Category</th>
       <th scope="col">Document Type</th>
      <th scope="col">Actions</th>
    </tr>
  </thead>
  <tbody>
      <tr v-for ="document in computedProducts" :key="document.id">
      <th scope="row">{{document.id}}</th>
        <td>{{document.name}}</td>
        <td>{{document.categories}}</td>
      <td>{{document.typename}}</td>
           <td>
 <a :href="'../uploads/'+document.file_name" target="_blank">  <i class="fa fa-file-excel-o" aria-hidden="true"></i><p class="filename">{{document.file_name}}</p></a>
      </td>
       </tr>
     </tbody>
</table>
    <pagination :data="documents" :limit="-1" @pagination-change-page="getResults"></pagination>
             </div>
                    <b-sidebar id="add-document" class="w-100" title="Add file" right shadow backdrop backdrop-variant="dark">
                   <mfileupload />
            </b-sidebar>
        </div>
    </div>
</template>
   <script>
     import mfileupload from './mfileupload'
    export default {
           data(){
            return {
              users:{},
              types:[],
              documents:{},
                 test:[],
              categories:[],
              searchQuery:'',
              isTyping: false,
              isLoading: false,
              category:'',
              doctype:'',
              keyword:''
            }
        },
          watch: {
    searchQuery: _.debounce(function() {
      this.isTyping = false;
    }, 500),
    isTyping: function(value) {
      if (!value) {
        this.searchUser(this.searchQuery);
      }
    }
  },
        methods:{
        searchUser: function(searchQuery) {
    	this.isLoading = true;
        axios.get('document/searchquery?q=' + searchQuery)
        .then(response => {
        	this.isLoading = false;
          this.documents = response.data;
        });
        },
            getResults:function(page =1) {
			axios.get('document?page=' + page)
				.then(response => {
					this.documents = response.data;
          
				});
		        },
            loadusers:function()
            {
             axios.get('/document')	.then(response => {
					this.documents = response.data
        
				});
            },
                        loadcategory(){
                axios.get('/category') .then(response => {
                this.categories = response.data;                  
             })
            },  
                 loadtypes(){
                axios.get('/documenttypes') .then(response => {
                this.types = response.data;                  
             })
            },  
     
           
        },     computed:{
         computedProducts: function () {
        if(this.category==''){
  return this.documents.data
}    
else{    
        return this.documents.data.filter((item) => {
        
                return this.category == item.category; 
            })
}
    },

  },
            created: function(){
            this.loadusers(),
            this.loadcategory(),
            this.loadtypes()
         
          
         
        },
       
    }
</script>

[gilbitron]

It looks like you're trying to filter the existing documents.data in your component when changing the category. This won't work as the rest of the Laravel paginator response data isn't updated. A better approach is to do a fresh call to the backend with the category and return a paginated response for the filtered data.