It's time to build the search for the application, and most of what is shown here is just a review, but there's a couple of neat things happening here that are pointed out.
- [Instructor] So, it's time to start adding search to our application and there's a couple of features I want to use that is going to make this a little bit easier. There are modifiers and watchers. Modifiers are special properties that you can add that will define how a directive should behave, so you can change the way the default behavior of a directive or an input field and watchers are ways of letting you track the change of certain variables, and then execute something when those variables change.
We have already seen an example in our forms where we add the information to our records and that would be the prevent modifier. It allows you to prevent the default behavior of a form element when a form is submitted so that it doesn't reload the page. There are some other event modifiers that you can look like capture, self, once and stop. If you want to learn more about them, take a look at this URL.
There are also modifiers for input fields that you can use, so I'm going to show you how to use one called lazy and it prevents our data from binding to a variable until we blur out of the input fields. You can find out more info on input modifiers at this URL. Now, those modifiers would work really well with another property of our Vue instance called watchers. Watchers are like computed properties that will respond to changes in your data so that you can watch the value of a variable and if it notices a change in that variable, it can execute some code.
You can get some more info on watchers at this URL. So, the first thing I want to do here is go to the SearchAppointments section and make sure that I look for this input field that has my search element. So, I'm going to add something called a v-model that will let me track a variable in this input field, so this creates like a two-way data bind that let's me keep track of this variable and I'm going to call this one searchTerm, so this is just a name that I'm making up and this is going to create a variable that's tied to that input field, so that means that I actually need to have that input field created in data, so I'm going to create a data field here and that's going to return that variable searchTerm and I'll initialize it to be empty.
So, if I save this, and I come here, and I jump into the developer tools, and I'm going to go to this Vue tab right here under SearchAppointments I should see that variable. If I edit this input field, it's going to bind that variable so that as soon as I change it, you'll be able to see it change in this searchTerm. Notice that as soon as I type any character, my searchTerm is actually going to change and sometimes that's considered not as efficient as it should be, so we can add a modifier here and the modifier on v-model can be lazy and let's go ahead and save that.
What that means is that now my searchTerm is not going to change unless I blur out or I get out of that input field if I say spot here and I hit tab, you'll see that it changes but it doesn't change as I type like it did before. Now, I happen to like a search that sort of is more dynamic and modifies my array as I'm typing, so using this modifier's really optional but some people think that just having checks of inputs all the time is a little non-performant or slow, so it's up to you.
I'm going to keep it off right now, so I'll hit save. So, the next thing I want to do is actually emit an event whenever this input field changes, so to do that, I could create an event or I could sort of track some sort of key up event in here but there is another property of my instance that I can create called watchers, so I can say here watch and I can ask Vue.js to track a number of variables for me, so if I say watch for a change in the searchTerm variable that we created and if that variable changes, then I want you to execute some code here and what I want to do is emit an event, so we're going to pass this along to the parent of this component and that is going to generate an event that I'm going to call searchRecords and then I'll pass along the searchTerms through that event so that the parent, remember, the parent has all this data in it, so that parent is going to be able to generate an array that is shortened depending on the search terms that I type in here.
Once I do that, I'm going to save this and I want to show you how you can track events in Vue.js using the developer tools, so let's go back here and I'm going to click on SearchAppointments to show you that now as I type, let's type fido here, as I'm typing I'm actually generating an event and this is part of the reason why people say that this is kind of a performance nightmare 'cause every time I type something, I emit an event and notice that the event that is emitted has a series of items happening right here, so it looks like I missed something.
This is actually a great way of debugging problems like what we're actually having right now. Every time I typed into this search field, it generated an event and it also carried a payload which normally should have something in here but it looks like I made a small mistake, so I need to make sure that I come back here. This is just searchTerm, not searchTerms. Let's go ahead and save that. We'll go back here, clear this out. Go ahead and refresh and try typing something in here.
Yeah, so now you can see that with the events, I'm actually getting the right information being entered into the payload. Let's go ahead and refresh this page and you do have to clear out these events sometimes, and I want to show you that I'm in SearchAppointments, let's type in fido here but notice that if I go to the parent of this which is MainApp, that is also going to have events in it that correspond to what I type in the other field, so that's fantastic, that's what we want.
We want to generate those events and then we need to catch those events in the main application. We need to go back and do app.view and make sure that we take care of catching that event, so insert appointments. I need to look for the event called searchRecords and then in here I'm going to execute a local version of the event called searchAppointments. Now, I could have called this searchRecords also but sometimes I find that giving things a different name when they do something different is a little bit better.
So, searchRecords is going to execute a local event called searchAppointments and what I'm going to do in searchAppointments is receive those terms from our event and I'm going to modify a local variable called searchTerms here, so searchTerms is going to get the terms that we typed in here and the reason I'm doing that is because I'm going to want to do some other things with those terms.
Let's go ahead and add some comments here, searchAppointments. I need to create this local variable called searchTerms, make sure that it exists in this component, so let's go ahead and do that and it's going to be empty by default.
- Creating basic apps
- Using lifecycle hooks
- Adding nested subcomponents
- Modifying data with methods and events
- Working with layouts
- Searching, sorting, and ordering