In order to create the search, you have to replace the array with another proxy array so that searching won't modify the array.
- [Instructor] In the last video, I showed you how to use modifiers as well as watchers to create a method that allow you to transfer what you type in here from one component to another, and in this video, I'm going to show you how to finish up the search. We're going to be using a technique where I use a temporary array to hold the values of my appointments. Now, the reason I need to do that is because if I were to modify the original array, every time I typed something in here, then let's say that I search for Spot or Goldie, if I modify the original array, then only Goldie would exist in that array because we would remove the other ones.
And then, once I deleted that word, I wouldn't be able to get back to the full list, so what I need to do is create an array that is a copy of the original array, but responds to things in my search input field. So to do that, I'm going to create a computed field, so I'm going to come down here to methods, create something called computed, and this computed field is going to be called searched appointments.
Since we're going to do a bunch of these tests, we'll put each of them in parentheses, like this. So there should be three parentheses right here, and then we're going to do another match test. We'll do three of them, actually. We'll check for the pet name, as well as the pet owner, and we'll also check the appointment notes. So we're not going to check everything, just these three. You don't need this or at the end. So if the individual item that we're passing right here matches the search terms in any of these fields, then this return will return as true, and so that record will be kept.
So for example, when we use it over here, right, we're saying find the value of the appointments in this object. This refers to the current object which is the instance of Vue.js, because we have this appointments array right here, that's what it refers to, so that's how we can get to that data. The problem is that now we have sort of a function inside a function, so we're saying this.theAppointments here is just fine, because that refers to the current objects, the appointments variable.
But when we are inside this other function, this actually refers to this parent here, so it doesn't know what I mean by this.searchTerms. It doesn't exist there. So we need to add a little piece of code here that is going to rebind the value of this so that it makes sense to use it in here. It's sort of pushing the current value of this, which is the object in this entire instance, into this internal series of tests so that now, when we say this here, it actually makes sense, and it can get to the search.Terms.
Go ahead and save that, and go back into our application, and we can see that we generate an event. Sometimes you need to hit this Refresh button, that way it'll bring these back in here. Let's trying typing in Spot. So you can see now that I have the original appointments array, and I have a searched appointments array that matches what I type in here. So there's actually two items that have the word Spot in them, and when I clicked on them, unfortunately, it moved down here, but you can see that I have the pet with the name Spot as well as this goldfish that has some weird spots in the belly.
So that's actually working, but if we look at what we're receiving here in this array, it's not really doing anything to our list. And so what we need to do here now is replace what we are sending to our appointment list. Right now, it's listing what is under the appointments, so all we have to do is match that now to this search version of the appointments. So searched appointments, and when we refresh, or when we save that, you can see that it now matches what is in here.
And as I sort of changed this, so I'll type in Barot Bellingham, or Barot, just B-A-R, matches only this record in these three fields, and so now it's showing me only that person. So now it's working just fine, and the super awesome thing that you may be noticing is that the appointment list is in charge of displaying a list of records based on an array that you're feeding it. It doesn't care whether that's the original appointments or the new appointments.
It's going to respond and react to whatever list you pass it. That's pretty awesome, because we then need to worry about the value of the arrays that we were sending it. All we needed to do was to send it an array and let it respond to that array instead of the original array. That's part of what makes Vue.js so amazingly powerful.
- Creating basic apps
- Using lifecycle hooks
- Adding nested subcomponents
- Modifying data with methods and events
- Working with layouts
- Searching, sorting, and ordering