- [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 differently because
we're using a blob of data that's always available.
So we have quicker access
and can do things kind of however we want.
So in here I'm going to call this .$emit.
This lets me fire a custom event called anything I want.
I'm going to call this filter-people.
View recommends that custom events use kebab case
so we'll do that.
So this is going to notify our root component
to filter people whenever this event is fired.
So we can pass along another argument,
which would be this.search,
which will capture the values of these filters
up here from our data object.
Okay, so now we have a method
we just need to fire it whenever something happens
in our form.
So each of these form fields is going to trigger
the same method.
So that would be v-on,
or, if we're using shorthand,
the at sign and then we need to pick the event
that should be firing for each of these inputs.
These are just going to be dominative events.
So for this one I could use change,
but I think what we want is for this field
to update every time I type anything whatsoever,
not just when I type something and hit Tab
or otherwise move the focus off of the field.
So for that, we'll use input
and we'll call notifyFilterUpdate whenever that happens.
These other two fields can use change though.
So we'll say at change equals the same thing
and we'll copy this
and paste it down on my checkbox as well.
Now I can save this and switch back and refresh.
Let's open up the Dev tools,
switch to View,
and watch for the events as we change these things.
Yep, there we go.
So I can see that the filter people event was emitted
and I can see the data that was sent with it each time.
You can see that the name is changing here.
Great.
So now we have a custom event firing
whenever the filter values change.
Our next step will be to act on those values
to filter the people list.