Now we need to add click handlers to the majors so that the students can be filtered:

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

   // click handler for the major filter buttons
   filterByMajor(major) {
       alert(major + " 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 button that displays the majors. It goes beside the existing v-for attribute:

      @click.prevent="filterByMajor(major)"

      This is calling the controller function, and passing the major 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 major 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 majorsFilterApi = ({major}) => `/api/majors/${major}`;

   This is using a template literal string (a JavaScript feature) 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 filterByMajor function with the following:

   axios.get(majorsFilterApi({'major':major}))
       .then(response => {
           this.students = 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 major 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 major 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 major and see the student list being filtered to only that major (via your DAO filterByMajor method). Note that there is no direct relationship between the filterByMajor function in the JavaScript and the filterByMajor 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 filterByMajor method to be called on the DAO.

6. For the "All" major, you can add another button to the div that calls the existing getStudents method.