1

I made a pagination, but there is a problem about slicing the array. Let's say an array contains 20 objects inside it. And pagination displays all. 10 per page. The code is right below. 

data(){
    return {
        perPage: 10,
        currentPage: 1,
        pageIndex: Number,
    };
},
computed: {        
    mainDatas() { 
        // other codes...
        //...

        this.pageIndex = this.currentPage * this.perPage;
        makeSort = makeSort.slice(this.pageIndex, this.pageIndex + this.perPage);

        return makeSort;
    },
}

But when I apply filter on the array. And let's say array now contains 17 objects. Then it's only show sliced first 10, the rest of 7 doesn't display. Next page is doesn't show up.

How can I make paginate without problem? What should I try...

yvl
  • 620
  • 7
  • 25
  • You should not be setting any `data` property values (ie `this.pageIndex`) within a computed property function – Phil Oct 25 '19 at 03:05
  • Try `let pageIndex = (this.currentPage - 1) * this.perPage`. Your issue is that you are starting at index `10` when on page 1 because `1 * 10 === 10` – Phil Oct 25 '19 at 03:08
  • thank you but, that is not problem solver. if I do `- 1` then yes it starts from 0 but, then I can't see the second third etc... becuse `currentPage` is being 0 and 0 x 10 = 0; in the end i can't get the next 10 ~ 20 or 30 ~ 40 items... @Phil – yvl Oct 25 '19 at 04:29
  • I don't understand. Wouldn't `currentPage` become `1`, `2`, etc when navigating pages? – Phil Oct 25 '19 at 04:30
  • oh, sorry. You were right I made a mistake somewhere else... Thank you. @Phil – yvl Oct 25 '19 at 04:41

0 Answers0