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

Update the template to now use the route name, with the params object:

<ol :start="pagination.range.from + 1">

<li v-for="product in paginate(products)" v-if="product">

<router-link :to="{name: 'Product', params: {slug: product.handle}}">

<img v-if="product.images[0]" :src="product.images[0].source"

:alt="product.title" width="120">

</router-link>

<h3>

<router-link :to="{name: 'Product', params: {slug: product.handle}}">

{{ product.title }}

</router-link>

</h3>

<p>Made by: {{ product.vendor.title }}</p>

<p>Price {{ productPrice(product.variationProducts) }}</p>

</li>

</ol>

Creating categories

A shop is not really a usable shop if it does not have categories to navigate by. Fortunately,

each of our products has a type key that indicates a category for it to be shown in. We can

now create a category page that lists products from that particular category.

Creating a category list

Before we can display the products in a particular category, we first need to generate a list

of available categories. To help with the performance of our app, we will also store the
handles of the products in each category. The categories structure will look like the

following:

categories = {

tools: {

name: 'Tools',

handle: 'tools',

products: ['product-handle', 'product-handle'...]

},

freewheels: {

name: 'Freewheels',

handle: 'freewheels',

products: ['another-product-handle', 'product'...]

}

};