The last step is to update the display to show what you're doing with sorting and ordering.
- [Instructor] So let's finish up the application by wiring up this drop down menu right here. So I've got a series of links right here, this is where the first element, this pet name, appears, and you can see this anchor tag right there. That is where I want to add my events. And so I'm going to put this on the next line and I'm going to look for a click event and when that happens I'm going to execute a method that I need to create called request key change and in this case, that event will get the pet name as the parameter.
And we'll repeat that for some of the other fields. So we've got pet name here and here we're going to do appointment date. This will be pet owner and it looks like we need to add quotation marks on these everywhere. I want to make this window bigger cause this is a little bit hard to see. And I'm going to do format these a little bit differently.
So I'm going to take these span tags and put 'em on the next line. And then I'm going to grab this. This one is going to run a slightly different method. We're going to call request direction change and of course this one will say ascending. The other one will say descending.
Okay so we need to create these methods and right now we don't have a method section here. So right after watch, we're going to need to create a comma here, then do a section for methods. And we'll need to create both of these, so request key change, goin' to be a function that receives a value. The value is going to be the text of what we want to change. And then this is going to end up emitting an event called key change, which we'll have to create in our main app, and will pass along the value.
We're using single quotes here so let's keep that consistent. And let's go ahead and add the other method, it's going to be pretty similar, we need to make sure we put a comma right there, and it's going to be request DIR change, and it's going to emit DIR change, with the values, so let's go ahead and save that, and now we're going to go to the main app so that we can create these events.
So in app.view we're going to create the methods here. And we're going to pass them along to a local version of those methods. Change key here and then change dir here and this one was called DIR change, which means that we have to create these over here. All right so these are going to go in methods.
Change key is going to receive the value, it's going to set the variable filter key to the value. And we'll need the other one, so this is change key. This is change dir now, so filter DIR to the value as well. So filter dir and filter key are the values that we keep track of in here that determines what the order of those elements are going to be.
All right let's check this out, see if it's working now. We will sort by owner, we can see that the owner name that appears first is, starts with a B, and let's go ahead and go back to pet name and if we sort by descending order you should see Buffy at the end and Spot at the beginning. So, that looks like it's working but my actual little check boxes aren't working, so we need to wire that up next. We're going to need this component to pass our search component, the information about what the current search order and direction are.
So we're going to need to put that right here somewhere and we're going to pass them along as props. So my key, going to set that to filter key. And my direction will be set to filter direction. So, these values are of course the same values that are right here. We need to pass that as props to this little search component so that it knows how to display these things right here so let's go ahead and save that.
And now we can switch back to search appointments and make sure that we update display, before we do that though, we have to receive those props. So in order to use them we need to have them right here as props and so we'll receive my key and my dir and now that we have them here, then we can use them to update our display. Let's make this bigger again. So there are these like glyph icons right here, right that are our little check boxes.
And let's go ahead and put this one on the next line, I'll put this on the line above here. What I can do here is use a V if statement and check to see if the variable called my key which is the current prop, is currently pet name, which is this current element so if the key happens to be pet name currently then it's going to show this glyph icon that has a checkbox.
Use that same piece right here for all the other ones, so right here, glyph icon if the key is appointment date. And I like to put these V if statements on the next line. So appointment date for that one. This one is pet owner. And then these others ones are going to be my direction and this is ascending.
This one is descending order. So we'll save that and check our application. It looks like there's little bit of a typo here, I shouldn't be seeing that right there. So let's save that and it actually looks like the quote is missing from right here, I don't know how I did that. So let's go ahead and test this out, it looks like the check boxes are in the right place. If you don't see this working make sure that you do a refresh.
Webhack tries to do a really nice job of swapping modules but occasionally it gets stuck, and just a good refresh is going to make everything work. So let's try this again, sort by owner, looks like that's working. By date, by pet name in descending order. So this looks like it works just fine, all the other functionality is workin' really well and we got a fantastic application that does a lot of work, using components in Vue.js.
- Creating basic apps
- Using lifecycle hooks
- Adding nested subcomponents
- Modifying data with methods and events
- Working with layouts
- Searching, sorting, and ordering