- [Instructor] Let's go ahead and add the functionality
to be able to sort these elements
by different parameters.
So let's go ahead and make this bigger here.
And to do that, we're going to need
a couple of variables here in our main component.
So I'll do a filter key.
This will be the name of what I want to filter by.
So in this case, it'll be pet name
and then a filter direction.
And this will be either ascending or descending order.
And then what I want to do
is create another computed property.
So right now I have the searched appointments.
I want to make another one here.
And this one will be filtered appointments.
We'll make that a function.
And it's going to be similar, but we're going to use
the awesome low dash library once again.
So we'll do a return statement here
and use the order by method
that we get when we use low dash.
This will take some array,
and in this case we're going to pass the searched appointments
as what we want to order by.
And then go through each of those appointments
and sort em by returning each of the appointments
using the filter key that we created.
We'll also convert that to lower case just in case
some of the cases don't match.
And the order by function will take two parameters,
the last parameter that it'll take
will be the filter direction.
So we can sort by either ascending or descending order.
And now instead of displaying the searched appointments,
we can display the filtered
appointments and now that we have done that,
you can see that the appointments
are now filtered by the name.
And the functionality is there for the filtering to happen
by any of the other parameters as well.
So if we come over here
and we can modify this thing right here,
this parameter to pet owner,
you'll see that the data rearranges
so that it's now filtered by this owner.
So that's pretty cool.
Just by creating another computer property
and using the awesome low dash methods,
we're quickly able to modify what we display.
The cool thing is that,
it should still be filtering by the search parameters,
whatever we type in here will apply.
And because I have this other computer property
that filters them by the key and the direction,
then it'll do that on top of what's already been searched.
Which is super convenient.