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

Respond to filter form updates - Vue.js Tutorial

From the course: Vue.js 2 for Web Designers

Start my 1-month free trial

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…

Contents