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 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'...]  }};

Creating the category list like this means we readily have available the list of products within the category while being able to loop through the categories and output the title and handle to create a list of links to categories.  ...

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