TahaSh / vue-paginate

A simple vue.js plugin to paginate data
MIT License
594 stars 103 forks source link

[vue-paginate]: 'listPaginate' is not registered in 'paginate' array. #109

Open volkanciloglu opened 6 years ago

volkanciloglu commented 6 years ago

[vue-paginate]: 'listPaginate' is not registered in 'paginate' array.

I am getting this error at the console but there seems to be no problem in sight. How can I resolve this error?

I watching paginated("listPaginate")

pagin() {
  return this.paginated("listPaginate");
}

I need to follow this . listing limit 6 item and ı need this 6 items data

Organizm238 commented 6 years ago

Provide me please with code where you use Paginate component. Something like this: <paginate name="listPaginate" :list="visibleProducts" :per="2">

volkanciloglu commented 6 years ago
<paginate 
          class="content-list" 
          v-if="filteredListing.length" 
          ref="paginator" 
          name="listPaginate" 
          tag="div" 
          :list="filteredListing"
          :per="6" 
          :refreshCurrentPage="true">

         <div class="item" 
                v-for="(item,i) in paginated('listPaginate')" 
                :key="i">
               {{ item.Key }}
        </div>           
</paginate>

 <paginate-links 
          v-if="filteredListing.length" 
          for="listPaginate" 
          :limit="3" 
          :show-step-links="true" 
          :hide-single-page="true"></paginate-links>

computed:{
    filteredListing() {
      if (this.pressList.length) {
        return this.pressList
      }
      return [];
    },
    pagin() {
      return this.paginated("listPaginate");
    }
},
watch:{
   pagin(newValue, oldValue) {
      // this.$store.dispatch("empty_press");
      this.files(newValue);
    },
}
Organizm238 commented 6 years ago

Have you defined 'listPaginate' as data like this:

data: function () {
            return {
                paginate: ['listPaginate']
            }
        }

?

volkanciloglu commented 6 years ago

Yes

data(){
   return {
        ...
        paginate: ["listPaginate"], // important paginate params
  }
}
volkanciloglu commented 6 years ago

I am getting the list with vuex getters. Could this be the problem? I am emptying the previous list with ajax. then I filling it with ajax. This warning is given once, then the list is working normally. I can navigate between pages.

volkanciloglu commented 6 years ago

I solved like this

data(){
    return{
     pagin:[],
     paginate: ['listPaginate']
   }
}
mounted(){
 this.pagin = this.paginated('listPaginate');
}

does not give a warning now. Is this the right method?