Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Building an E-Commerce Store - Browsing Products Chapter 10

template: `<div>

<list-products :products="products"></list-products>

</div>`,

computed: {

products() {

let products = this.$store.state.products;

return Object.keys(products).map(key => products[key]);

}

}

};

Within the ListProducts component, we need to add a props object, to let the component

know what to expect. This component is now significant. There are a few more things we

need to add to this component to make it more versatile. They include:

Showing the next/previous links if there is more than one page

Showing the "products per page" component if there are more than 12 products,

and only showing each step if there are more products than in the preceding step

Only showing the pageLinks component if it's more than our pageLinksCount

variable

All of these additions have been added to the following component code as follows. We

have also removed the unnecessary products computed value:

Vue.component('list-products', {

template: `<div v-if="products">

<p v-if="pagination.totalPages > 1">

Page {{ currentPage }} out of {{ pagination.totalPages }}

</p>

<div v-if="pagination.totalProducts > 12">

Products per page:

<select v-model="perPage">

<option>12</option>

<option>24</option>

<option v-if="pagination.totalProducts > 24">48</option>

<option v-if="pagination.totalProducts > 48">60</option>

</select>

</div>

<button

@click="toPage(currentPage - 1)"

:disabled="currentPage == 1"

v-if="pagination.totalPages > 1"

>