From the course: Vue.js 2 for Web Designers

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Handle custom filter event

Handle custom filter event - Vue.js Tutorial

From the course: Vue.js 2 for Web Designers

Start my 1-month free trial

Handle custom filter event

- [Narrator] In this video we're going to complete the filter form by hooking up a listener for our custom event. Currently, our directory filter's component emits an event called filter people whenever the values change but nothing else happens. A root component needs to listen for that event and fire a method to do the filtering. Let's add a method first, call it, update people list. Let's see, down here, define some methods, and we'll call this update people list. This will be a function and we're passing in the parameters that we're going to search on, so I'll call an argument, params, and we'll just put a console message in here to start. Update people list, fire. Now we need a listener for the custom event that can fire this method. So over here in index.html down around line 122 here, is my directory filters component. With don events, we add a listener to the form field that emits the event. Likewise, the filter people event is being emitted by the directory filters component…

Contents