- [Instructor] It's time to start
making this drop-down work,
and in order to do that I'm going
to need to pass some information
from the main component down to the sub-component.
And, essentially, what I need to do
is the pass along the value of these two elements
or these two variables, filter Key and filter Dir down
to the sub-component and then do something with that.
So, what I'll do is add in my main component.
I'm going to create a new variable
that I'm going to pass called my Key
and that's going to pass along the value of filter Key
and then I'll create another variable called my Dir
for the direction, and pass along filter Dir.
So, I mentioned before, I like
to name the things that I'm passing down
to the sub-components differently
then the value in the current component
and you'll see a lot of times how people just name this
and this the same but, for educational purposes,
I like to call them different things.
So that you know that this is going to be the value
of the variable and the sub-component,
and it's getting it from the current component, right?
So, now that we have that passed along
to our search appointments component.
I'm going to come down here and I need
to receive them into this component.
So, I'll need to issue this other element here,
called props for properties,
and then just list them in here
as properties of this sub-component.
So, that means that
the props are my Key
and my direction,
and they're called props
because they're passed along like properties
in an HTML tag that kind of look like properties.
Except they have these V binds sort of colons here.
So, we'll save this and keep on going.
So now that we have the values here, we can
do something with them.
So, what we want to do is control whether or not
the check boxes are showing up depending on the value
of those variables.
So I'll do an if statement here
and to do that you use the V if directive
and U to ask,
and I'm doing this on apt date
or the appointment date,
because I know that by default the key
when the application starts up is pat name.
So that one will always have the checked box
when the application starts.
So I'll say V if my key is
equal to
appointment date.
Then it's going to show this ICON.
So, let's save that and take a look at our drop down.
And now date should not have that check box.
And we'll do the same,
for pet name, and save that one
and just take a look.
And sometimes when you things you got to refresh the page.
Webpack which your life reload server
doesn't always reload properly so sometimes
it's like turning your computer on and off
it fixes a bunch of things, you can see know
that pet name is showing up, date isn't showing up.
So we can do the rest of them.
(pause for five seconds)
And here the value that we want to send is pet owner.
And here instead checking for my key
we're going to check my dir for my direction
and this one will be ascending,
(pause for four seconds)
and this other one will be descending.
Alright, let's check out our drop down now,
and let's refresh it, and it looks like these
aren't quite working so,
(pause for four seconds)
looks like when I passed along the prop, I passed it along
as a capital, my directions.
So we'll fix that.
Check this out and now their both working.
So now we at least are reading the values
of the direction as well as the key.
So we can properly display what's going on
in this sort by element.
We'll need to create some events
that will allow us to push a change when
we click on one of these items.
We'll take care of that in the next video.