vue.js pagination mis calculation

Question

In my app, I have some pagination code which calculates the pagination based on data from a REST API. When I add the page of pages, it is calculating from page 0 not from 1, so it says 0 of 9 and when it gets to the end it says 8 of 9, when it should say 1 of 9 and 9 of 9 at the end. So far my code is:

HTML

<p>Page {{page}} of {{pageCount}}</p>

JS

data: function() {
    return {
      page: 0
    };
  },

computed: {
    pageCount() {
      let l = this.result.length,
        s = this.size;
      return Math.floor(l / s);
    },
    paginated() {
      const start = this.page * this.size,
        end = start + this.size;
      return this.result.slice(start, end);
    }
  },

Any ideas? Maybe I am calculating the math.floor method wrong?

It looks to me like your pages are 0 indexed, not 1 indexed. The page count is correct, but you're starting from 0. Is there any reason you can't just add 1 on your view portion? — Cal Irvine
If I change page: 1 the paginated results start from page 1 — Sole
It will start from 1 of 9 but there is also results on the previous button for 0 — Sole
Sorry, I don't know Vue, but anyway, what I'm suggesting is not to change the value of page: 0, but just what shows up to the user. <p>Page {{page + 1}} of {{pageCount}}</p> Would this work? — Cal Irvine
When I tried that before it did not work, but that has worked now, can you submit as answer and I can accept. — Sole

Cal Irvine Cal Irvine · Accepted Answer · 2019-07-05T16:47:53

Your page variable is 0 indexed instead of 1 index. You can keep it this way so that your pagination continues to work as intended, but where you are outputting it to the user you can simply add 1 so it makes sense to a user.

<p>Page {{page + 1}} of {{pageCount}}</p>

vue.js pagination mis calculation

2 Answers