- [Instructor] Let's finish up our project
by bringing our navigation.
So I'm going to go back into my CodePen,
and I'll expand this right here.
I've already got the navigation collapsed here,
so I'm just going to copy that.
And then I'll go back to my project,
and just like before,
I'm going to create a new component.
I'll call this one navbar.view,
and do the same thing with the template.
And go ahead and paste that in there.
Then I'm going to type in my script.
And in here I'm going to need to import a couple things.
So I'm going to need to import the price
so that I have access to the component that converts
a number to a formatted price.
So it's in the same folder as this one,
so it'll just be price.view.
And then I need to import the Font Awesome icon.
And it needs to be the forward awesome, view font awesome.
Let's go ahead and make this window bigger
so we can see things a little bit better.
Alright, we'll give this thing a name.
We'll bring in some of the props,
so for this one we're going to need the content of the cart
as well as the variable called cart quantity.
And since we have a variable
with the total of the cart and for components,
we're going to bring the Font Awesome icon as well as price.
Looks pretty good.
So I'm going to save that,
and then I'm going to go back into app.view.
And I'll bring in the navbar right here.
Alright, the navbar is going to require some things,
so I'll pass along the cart information,
cart quantity,
and cart total.
Let's go ahead and import that component,
and we'll need to add it here as well.
And as a matter of fact,
I'm going to move these components farther up.
Kind of make more sense closer to the top,
although it doesn't really matter where you put 'em.
Just looks a little cleaner here.
So I had noticed a little problem in this price slider,
that view file, this is pretty minor.
In our class we're still using something called label array,
which we don't really need to do that.
That was just me showing you how to use arrays for classes.
So I'm just going to hard code some classes here.
It doesn't really look bad,
but it's probably showing an error somewhere,
so let's go ahead and fix it now
while we're thinking about it.
Alright, so let's go back into app.view,
and let's see if this is coming in.
And it looks like the icon's not coming in,
so I'm going to go over to the navbar
and I'm going to look for that icon.
And the problem is that I defined that icon
with the script import,
and this is how you do it in script import.
But we've imported a component, so we'll use that instead.
Alright, so that looks better.
And we need to make sure that this is working,
and it's not going to be working quite yet,
so let's go ahead and fix that.
We've got this button right here
that is going to modify the state of slider status,
but again, that doesn't exist in this component.
This is in the parent component.
So we're going to have to call this a little bit differently.
We'll just do an emit here.
So we're going to call this toggle.
And then in the parent component,
we'll need to catch that.
So toggle is going to execute a local method
called toggle slider status.
It looks like I missed a quotation here,
that's why it's complaining.
So let's save this and come down here
and create that additional method.
It's going to reverse it,
so if it's true it's going to become false, and vice versa.
Okay, let's save that.
We do have slider status there, so that should work.
So let's check this out.
Now that shows up, and it hides, that's great.
Even with our animation and everything.
So now let's see what happens
when we click on adding an item.
Right, so we're getting not a number here.
There's something else we need to fix.
Let's actually see this dropdown here.
So the dropdown's actually correct,
but we're not getting the correct price here.
So that's pretty cool.
Let's see if we can add some additional items.
So it looks like the items are coming in,
and we just have to fix a couple of these little buttons.
The delete button, and then the item
that displays the price here.
So let's do that.
First of all, we don't have the lead item method,
so we're going to import that.
And I think that's about the last thing
we'll import from here.
So I'm going to copy this delete item right here,
it's a little bit better if you collapse them
and scrap the entire line.
I like to put my cursor at the beginning
and just hit shift down.
That grabs the whole thing.
Let's go back, and again here's my method,
so it doesn't really matter where you put it.
So I'll put it on top of add item.
And we'll save that.
So at least my delete method is done,
but we need to make sure that they're being called properly.
We're also going to need, actually, a couple more things
I'm noticing here.
So we have these computed properties called cart total
and cart quantity,
so we need to bring those in as well.
And those are under computed properties,
there's cart total and cart quantity.
Again, do my little trick, copy these two,
and these will be in computed.
Then we will put that in there,
make sure we get rid of that last comma, and save this,
and now we have those computed properties.
Let's take a look at what's happening here.
So we can add items.
It looks like our numbers are now working properly,
because now we have those variables
called cart quantity and cart total.
Although the items aren't quite showing the proper values.
So just a couple of minor things,
let's go ahead and continue
and fix these minor issues in the next video.