It's time to build the search for the sample 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] We have one more component to add to this interface, and so this'll be a good review of how to add a component into an existing component. I've created a Gist with all the code you're going to need right here, and I'm going to go to this raw link and select all this and then go back into our files here and create a new one. And this is going to be called SearchAppointments.vue, and I'm going to paste that.
And all we have here is just a simple HTML template that uses some bootstrap tags to set up a search field as well as a drop-down or sorting. And then we have this export default that just defines a name for this component. So it's a little bit easier to debug items. So now we need to go into our main component, this App.vue. Let me close this other one out. And we need to add a few fields here.
So I have add-appointment as a special custom tag here. I'm going to add search-appointments, and that means that I'll need to import it from my file. So SearchAppointments, and that happens to be in SearchAppointments.vue, and of course I have to register it, and that means that we're registering this tag right here, search-appointments, and that is going to be fed the data that we get from this SearchAppointments object, so I'll put that here.
And when you do that, you should see this search field. It's really nice. I really like the way bootstrap gives you a lot of really cool interface elements. And on this drop-down, we just have check boxes next to each one of these items. We're going to be able to pick from sorting by the different fields and then also in ascending or descending order. We'll program that functionality in the next few videos.
- Creating basic apps
- Using lifecycle hooks
- Adding nested subcomponents
- Modifying data with methods and events
- Working with layouts
- Searching, sorting, and ordering