O'Reilly logo

Vue.js 2.x by Example by Mike Street

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required