Building an E-Commerce Store - Browsing Products Chapter 10This ensures all the computed variables update when a different page is navigated to. Open
your HomePage component and ensure all your pagination components work accordingly
and update the list.
Updating the items per page
The last user interface addition we need to create is allowing the user to update the number
of products per page. To initially set this up, we can create a
attribute that updates the value directly. This works as expected and updates the product
list accordingly, as shown:
template: `<div v-if="products">
<p>
Page {{ currentPage }} out of {{ pagination.totalPages }}
</p>
Products per page:
<select v-model="perPage">
<option>12</option>
<option>24</option>
<option>48</option>
<option>60</option>
</select><button @click="toPage(currentPage - 1)" :disabled="currentPage ==
1">Previous page</button>
<button @click="toPage(currentPage + 1)" :disabled="currentPage ==
pagination.totalPages">Next page</button><ol :start="pagination.range.from + 1">
<li v-for="product in paginate(products)" v-if="product">
<h3>{{ product.title }}</h3>
</li>
</ol><nav>
<ul>
<li v-for="page in pageLinks">
<button @click="toPage(page)">{{ page }}</button>
</li>
</ul>
</nav>
</div>