Building an E-Commerce Store - Browsing Products Chapter 10We now need to construct our filters, based on the products in the category. We will be
doing this by looping through the products, collecting information from preselected values,
and displaying them.
Create a data object that contains a key of topics. This will be an object containing child
objects with a, now familiar, pattern of 'handle': {} for each of the properties we want
to filter on.
Each child object will contain a handle, which is the value of the product of which to filter
(for example, vendor), a title, which is the user-friendly version of the key, and an array
of values, which will be populated.
We'll start off with two, vendor and tags; however, more will be dynamically added as we
process the products:
data() {
return {
topics: {
vendor: {
title: 'Manufacturer',
handle: 'vendor',
values: {}
},
tags: {
title: 'Tags',
handle: 'tags',
values: {}
}
}
}
},We will now begin looping through the products. Along with the values, we are going to
keep track of how many products have the same value, allowing us to indicate to the user
how many products will be revealed.
Loop through the products on the category within the filters method and, to begin
with, find the vendor of each product. For every one encountered, check whether it exists
within the values array.