- [Instructor] It's time to make
this drop-down actually do something.
So to take care of that,
we're going to create some events
that are going to emit to the main component.
So we'll go to, for example, this petName section here
and establish that when somebody clicks on this,
then we're going to emit an event
and I'm going to call this requestKey
and then pass along how I want to change that.
So petName, I'm going to close this out,
and we'll need the same thing for the other ones
and for ascending and descending,
we'll send along requestDir
and then ascending or descending.
Alright so once we have that,
we'll need to capture these in the main component,
so this should be getting pretty familiar to you.
You have to move things from a two-components
to make then communicate with one another.
So we'll need to catch these events in here
and take care of them appropriately.
So we'll catch requestKey
and we'll send this along to a local event called changeKey,
same thing for request direction change
and change direction,
and then all we have to do is update the variables
for the filterKey and filterDir.
So we'll have to create some methods.
This will receive the value from the payload
that we get from the sub component
and all we have to do is just modify the filterKey,
which is the local variable,
set that to the value and we're all good.
So let's do that for the direction,
and set that to the value again,
and let's check this out.
So now you'll see that we can sort
by all these different fields
and notice that my check boxes are acting properly as well
and I can also change the ascending
or descending order of these sorts.
So the cool thing about view is that everything is related.
So if I type in some stuff in here,
hmm let's see,
you can see that although I have two items,
I can still sort 'em appropriately
and even if I delete one of these,
they'll still be sorted
because of everything that's going on between some
of the reactive sort of variables that I have.
Whenever I do anything to the list,
it gets resorted and also searched as well,
so when I delete this,
you'll see now that I have three items
'cause I deleted one of 'em
and they're still holding their sort
in ascending and descending order, pretty cool.