Now we need to add click handlers to the categories so that the products can be filtered:

1. Add a function to methods that will act as the click handler for a category:

   // click handler for the category filter buttons
   filterByCategory(category) {
       alert(category + " was selected");
   }

   Again, we are using an alert as a quick sanity check.

   1. Back in the HTML page, add the following attribute to the category button/link that we repeated in step 4 of the previous section. It goes beside the existing v-for attribute:

      @click.prevent="filterByCategory(cat)"

      This is calling the controller function, and passing the cat variable that the v-for created.The @click part is shorthand for v-on:click although there are some subtle differences — it is recommended that you stick to the @click shorthand.The prevent part is there to stop additional events from firing. Vue will handle the click event and then the standard button click event will kick in --- these standard events can sometimes trigger unwanted page reloads, so we suppress them with the prevent directive. It is generally a good idea to use prevent with click and submit handlers.

2. Save, reload the page, and test. You should see an alert pop-up message that tells you which category you selected. Remove the alert once you have confirmed that the pop-up box is being displayed since you now know that the function is being called correctly.

3. Add the following near the top of the file to define the API path for the filter operation:

    var categoriesFilterApi = ({category}) => `/api/categories/${category}`;

   This is using template literals to add a path parameter to the URI. Template literals are strings that contain embedded variables. They are perfect for creating URI variables that contain path parameters.

   <> Note the backticks (the reverse speech mark character --- it is just to the left of the '1' at the top left on most keyboards). You can read more about template literals at:

   https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

4. Replace the alert in the filterByCategory function with the following:

   axios.get(categoriesFilterApi({'category':category}))
       .then(response => {
           this.products = response.data;
       })
       .catch(error => {
           console.error(error);
           alert("An error occurred - check the console for details.");
       });

   This first line of code is providing a value for the category path parameter. We can treat template literals as functions and pass an object that supplies the values for the variable parts of the template. In this case, we are setting the category variable in the template literal to the value that is passed into the function.

5. Save, reload, test.

   You should be able to select a category and see the product list being filtered to only that category (via your DAO filterByCategory method). Note that there is no direct relationship between the filterByCategory function in the JavaScript and the filterByCategory method in the DAO --- we can use a different name for the JavaScript version if we want to. There is an indirect relationship however --- the JavaScript function is using Axios to send an HTTP request to the web service that will trigger the filterByCategory method to be called on the DAO.