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

Creating the ListProducts component

Before we proceed with creating the filtering and ordering, we need to extract our product listing logic and template it into our component allowing us to easily reuse it. This component should accept a prop of products, which it should be able to list and paginate.

Open up the ListProducts.js file and copy the code from the HomePage.js file into the component. Move the data object and copy the pagination and pageLinks computed functions. Move the watch and methods objects, as well as the created() function, from the HomePage to the ListProducts file.

Update the HomePage template to use the <list-products> components with a products prop, passing in the products computed value. In comparison, the HomePage ...

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