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.
Respond to filter form updates - Vue.js Tutorial
From the course: Vue.js 2 for Web Designers
Respond to filter form updates
- [Instructor] In this video we're going to add the last major feature of our directory, updating the list of people according to the state of the filters. We're going to need to add several event listeners and handlers to make it all work. Whenever any of these fields changes we're going to be doing basically the same thing, updating the list using the value of all the filters at once. So let's add a single method that will handle any update to any of these fields. Back here in directory.js I'm going to add a methods key. This is just like in your root instance and we'll call this notifyFilterUpdate. Calling it notifyFilterUpdate because this component doesn't actually own the data that's going to be updated, we're just going to be emitting a custom event that will let the parent do the work for us. In larger apps or sites, when updating filters, we'd probably batch all the updates up a little and make a call to an API to retrieve the current list of people. We're doing it a little…
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
-
-
-