Calculating the values

The arithmetic behind creating a pagination component and displaying the correct products relies on four main variables:

  • Items per page: This is usually set by the user; however, we'll use a fixed number of 12, to begin with
  • Total items: This is the total number of products to display
  • Number of pages: This can be calculated by dividing the number of products by the items per page
  • Current page number: This, combined with the others, will allow us to return exactly which products we need

From these numbers, we can calculate everything needed for our pagination. This includes what products to display, whether to show next/previous links and, if desired, a component to skip to different links.

Before we proceed, we are ...

Get Vue.js 2.x by Example now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.