Create a Filtering Component

[00:00:00]
>> Cool, we'll come back to this piece. We're going to now filter the grid with a reusable component and use computed properties. So how are we gonna filter that grid? We have that grid of information that we're working with here, and what we want is on the restaurants page, we wanna be able to filter for dim sum or pizza or tacos based on our mood.

[00:00:26]
So let's go back over to the file in the restaurants file, and you might have noticed that the restaurants was over up in the side. I did make a style that will allow the restaurants to lay out okay and also have like a select value here. So I'm going to go over here and what I'm gonna do is I'm gonna create a div that is like restaurants heading.

[00:00:57]
Not restaurants heading, restaurant heading. I'm gonna place restaurants inside of that. And that's also where we're going to add a select. So I'm going to create a thing called AppSelect.vue. And we've add it to the components, Create our component here. And when we're working with Select, we wanna make sure that we're working with something that is good for blind people.

[00:01:32]
The other thing that we're gonna do is we're gonna use a computed property to be able to filter through that information really quickly. If you watched the other course, you saw how computer properties can be really powerful for filtering lots of information super efficiently. Because it's cached and doesn't update unless a dependency has changed.

[00:01:49]
So that makes it a really good candidate for filtering this grid. So I'm going to create this AppSelect component but I named it AppSelect and not something more specific. Because, what I wanna do is I wanna make a Select that I can reuse for other parts of the app in case I'm gonna do something else with that AppSelect.

[00:02:10]
So if you are curious on how to make accessible markup, web aim is a really good resource. So they show you how to do all of these kind of form controls. So it's text inputs, text areas, checkboxes, radio buttons. So if you're the kind of person who's like I care about the blind, but I don't know how to make everything appropriately, you can copy paste the markup from here and then use Vue to kind of add to those and bind to those, which is what I'm doing, basically.

[00:02:39]
So, I'm taking this label and my select, and now I know that I'm going to be creating accessible markup. So, in this div, I'm going to paste what I brought in and instead of hard coding values in data, what I'm gonna do is I'm gonna add in some props.

[00:02:59]
So I'm gonna say, v-props and I'm going to say Select and the type is gonna be string. And I'm just gonna, the Select the default is gonna be cuisine, because I'm probably gonna use this all over my application this way. But in case I'm gonna use it for something else, like let's say I'm gonna use it for a feedback form from customer or something like that, I can, I don't have to use the default necessarily.

[00:03:27]
So I can say, which is your favorite, instead of thing I could say, Cuisine, actually maybe I want to rewrite that because maybe you're in the mood for dim sum, but it's not your favorite, tacos are your favorite because they have to be. [LAUGH] We're gonna say, what cuisine do you want?

[00:03:51]
We're also gonna make sure that the label is hooked up to that Select so that it's unique. So as we have the Select, the label has to work with the ID. These have to be associated. And again, I'm putting that bind there. This colon is v-bind. I'm putting that shortcut of the bind there, because I want it to actually evaluate.

[00:04:16]
I want it to actually use that prop. If I did not do that, it would just evaluate as Select just hard coded that string Select. So we have this Select with the name of thing. And then we have a bunch of options. In option, we want to at first show a default option.

[00:04:35]
And then we wanna show a bunch of other options. So I'm gonna have no value on this. And I'm gonna say, Please select a whatever it is, I said cuisine here instead of Select. Did you say that in the chat? Let's see. I think people said it in the chat.

[00:05:00]
Yeah, okay. [LAUGH] So here, we have the Select. Please select the Select I probably could have named that better, all right? [LAUGH] We've got this option value. And the nice thing about using Vue is I can loop through a bunch of different, options that we come in. So, I'm actually going to say Select options as a prop 2 and that one will be, the type is array.

[00:05:34]
And when we use arrays and props, we have to make sure that we use a function and we're returning that array. So we can't just pop the array and we actually have to return a function. So we have tacos, Pizza, And dim sum, cool. Now we can loop through our options so we can say v for option in Select options.

[00:06:13]
And I actually like this about VS Code it errors until you provide a key. So it will kind of remind you, hey, I think you need a key there. [LAUGH] And I think that's a feature of the tour, which is an extension that I mentioned before but if you install my snippets it comes as a dependency.

[00:06:34]
We also need to make the value option. And this has to say option, Cool, I think we're doing pretty good so far, all right? The next thing that we wanna do is we wanna actually put it on the page so we can see if it's gonna be there.

[00:07:03]
So, [LAUGH] we will probably wanna add that v-import of AppSelect. And, great, let's add our App, Select here. Let's go check out what we have right now. We've got our Nuxt food app. And now you can see it's properly, [LAUGH] laid out instead of in a goofy corner.

[00:07:36]
And we've got what cuisine and we have tacos, pizza and dim sum. Right now though it's not really doing much it's just presentational because we're not actually gathering the data anywhere. What we wanna do is we wanna emit from the child to the parent, what the value is.

[00:07:54]
Now why would we use a store for this or something. Well, typically when we're dealing with the application state of the whole thing, we wanna put that in the store because we wanna think like, okay, what do all the components need to know about, right? Everybody needs to know about the food data.

[00:08:11]
Everybody needs to know about a cart or something. But in this case because we wanna keep this component really succinct and reusable for multiple places, we probably just want to be emitting from the child and allow the parent to gather that information in the parent is the thing that is really smart here.

[00:08:30]
The parent is the thing that holds the information. So if we go back over to our Select, I'm going to use my snippet for child components, so v-emits child. And this is actually fairly typical, well, this is the way that we need it actually. Because that's a fairly typical emit that when something changes, we want to emit the event.target.value.

[00:08:58]
In our case, the event.target.value would be here. So we can save this. So we've got this event.target.value, the name name is also Select. And now on the parent, what we're gonna do is we're gonna go back over to restaurants.Vue. And we're going to say, we're gonna first, we're gonna make sure that we're actually like collecting that information somewhere, right?

[00:09:33]
We need a place to put it. So we're gonna say Data, return, Selected restaurant, maybe that's a good one. Yeah selected, rest and empty string. And then on that AppSelect, we're gonna bit do v-emit parent. And food is obviously not what we need. We need that selected restaurant.

[00:10:03]
And then just to make sure it's working, I'm gonna do that pre tag that I showed you. I think I used it in the last course but I haven't used it here. So let's use a pre tag for a little debugging. I'm gonna output data in mustache templates.

[00:10:24]
So save that. And what this is gonna do is it's gonna allow me to see immediately if something is I want, I could look at the kind of dev tool things. But in this case I can just see, selected restaurant is nothing and now it's pizza. And now it's dim sum, excellent.