- [Instructor] It's time to make
this search work right here, so what we're going to do,
is begin by taking care of filling out this search term
from the input field, we'll come up here,
and we'll add a v-model,
and we'll make that equal to the search term.
So that's going to make the search term variable
contain whatever we type in here.
Now in addition to that, we're going to come down here,
and create a new section called Watch.
So Watch will allow you to track
a variable as it changes in a document.
So you may be thinking,
why aren't I using something like a Blur event in here?
There used to be an event that tracked Key Up events,
much like the Blur, but in this case,
we want the search to happen as somebody
types in characters in here,
as opposed to after this field has lost focus,
so that would be the Blur event.
Now, the Key Up event has been deprecated,
because it's considered to be
a little bit performance-heavy,
so instead what we can do is watch
for the changes in a variable,
we'll keep track of that search term variable,
and then whenever that changes, execute a function,
and this function is going to emit
something to our parent component.
I'm going to call this Search Records,
so this will trigger an event and pass along
the search term to that parent component.
So let's go ahead and save this.
We'll go back into App.vue, and now in Search Appointments,
we can capture that event,
and we'll execute a local event called Search Appointments,
just like we have done before with other events.
Now we need to create this Search Appointments method,
so we'll do that here, this is going to be a function,
it's going to receive the terms from the event.
All I'm going to do here is keep track of the terms
in a local variable which I'll need to create,
and I'll call this search Terms,
and I'll make that equal to the terms
that we receive from the subcomponent.
So that means I need to create this variable,
and I'll initialize it to be empty at the beginning
so that it doesn't have any values in it.
All right, so next up, we need to go ahead
and create an array that is based on my appointments,
but that is filtered through those search terms.
Now, to do that, I want to create a new section here,
and I'm going to call this Computed,
so this is similar to Methods,
but a computed property is something
that Vue.js is always going to keep track of,
and I'm going to create a separate version
of the Appointments that are filtered
through the search terms whenever the search terms change.
So I'm going to call this Searched Appointments,
and it's going to be a function,
and this is going to return the current appointments,
and I'll use the JavaScript filter method
to go through each of the elements in the appointments,
filtered through my different search parameters,
so I will go through and look for the pet name,
and I'm going to use the JavaScript to lowercase method,
so that it doesn't matter if somebody types in
or if somebody has a pet name that is capitalized.
And I'll also use the JavaScript Match method
to compare that to my search terms,
also converted to lowercase.
I got to make sure that I'm comparing lowercase versions
of either what is in the data to what somebody typed in,
so I'll do that for some of the other fields,
so pet name, pet owner, and finally, appointment notes,
get rid of this or statement at the end,
so just make sure that I check
to see if any of the search terms
match anything in each of these three different fields.
All right, so when I do that,
now I have this slightly different version
of the appointments called Searched Appointments.
Instead of passing along the list of the appointments,
what I'm going to do is pass along my computed property,
which is searched appointments,
to the list, and that will automatically now make the list
display the searched appointments.
So if I search for something in here,
so it looks like it's not working
when I type something in here.
Let me take a look at my console
just really quick to see what's going on.
I can see that there's a couple of errors,
and this is sort of where you would check
to see if you've made any errors.
You've probably run into this before,
but it looks like I'm using the wrong method here.
It's not lowercase, it's to lowercase,
so let's check that out.
Yeah, so this right here should be like this other one,
so this to lowercase here.
Let's go ahead and save that, and refresh this page.
And you can see that now when I type in something in here,
it's going to search through each
of these three different fields,
and find the elements to match,
so that was actually pretty cool, because, you know,
I think this actually showcases
the power of the Vue.js framework,
the fact that the component is so self-contained
that I can just send it a modified version of an array
and it just takes care of displaying any of the elements,
regardless of whether that is
the original array or a computed array.