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 - Vue.js Tutorial
From the course: Vue.js 2 for Web Designers
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
Make a plan2m 26s
-
Scaffold initial components5m 18s
-
Pass component data with props6m 4s
-
Build the filters form5m 13s
-
Wire up the filters form4m
-
Respond to filter form updates3m 7s
-
Handle custom filter event3m 29s
-
Animating with transition-group6m 28s
-
Challenge: Better usability and animation1m 30s
-
Solution: Better usability and animation1m 39s
-
-
-