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:

	```javascript
	// click handler for the major filter buttons
	filterByMajor(major) {
		alert(major + " was selected");
	}
	```

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

 2.  Back in the HTML page, add the following attribute to the button that displays the majors.  It goes beside the existing `v-for` attribute:

     ```javascript
     @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.

3.  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.

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

    ```javascript
    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.

    <<warning>> 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:

     ```javascript
	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.