- [Narrator] It's time to take the dropdown
out of our navigation and see how
that's going to affect our project.
Now to do this, we're going to make a couple of other moves.
We're going to start by taking our products
and moving them out of the homepage into the app,
that vue file.
And that's because I want to make sure
that those products are available to our navigation
and any other pages that we might have.
That means we're going to have to move
our created light cycle method.
And then we're going to take the dropdown
from Navbar.vue and move that over to cartDropdown.vue.
Just taking the little piece
that's the actual dropdown from one file to the other,
because that's how we scaffold it.
So let's go ahead and we'll start on home.vue.
And we want to take these products piece right here
and we'll save that and we'll put that in app.
So after the cart, also don't need this displayCart false
anymore because that's actually handled
inside one of the other components.
So now we have cart and products
and we also need to go back into home
and move this lifecycle method here, create it
and we'll put it back over here.
So there it goes.
It'll be created here under methods,
and now that's going to load the data, put it into products.
That means that we need to pass the products to our router.
So in addition to the cart, our router will get products
and it's going to equal the local products variable
that gets injected with what we get
from this fetchcart right here.
All right, so we'll save that.
That also means that because we're passing it down
then on our homepage, we need to
make sure that we add this as a props.
A lot of vue does is about dealing
with all of the information, moving props and events
from one component to the other, right?
So we'll save that.
And now the only thing that we need to do
is the movement of the dropdown.
And I think I'm going to put this on top of the components.
You should have like to have the data first
and then things like the props and then components
are computed after that.
So just a small change there.
Well, let's go ahead and close some of these windows here
because we've got too many things open.
So we're going to open the Navbar
and try to remove the dropdown.
So everything in this dropdown clip right here.
So I can actually cut it from here.
I'll leave this blank line on.
So see that I'll need to insert a tag in here in a minute.
So now we can go to cart dropdown
and I'm just going to paste that in the template
and save it and go back into the Navbar
and in here, I'm going to have to insert the prop
that we're going to be using
it's going to be called the cart dropdown.
We'll pass it along the cart
and we're going to pass it a method called displayCart.
That means that we're also going to need to import
down in here, so we should import statement,
CartdropDown and load the component.
I mean, that means that we'll need
to add it here as a component
and actually this seems to be capitalized here.
And looks like I forgot to close
this out right here.
And so I'm also going to create a method here
that is going to control the display
using this displayCart variable.
So I'm going to add that as a method
and it's going to be called toggleCartMenu
and I'm just going to take the displayCart
and make it the opposite of whatever
I have to put this displayCart.
So it's always going to toggle the value
of the displayCart variable, which is right here.
And we're going to pass that along to the dropdown as well.
And I just got done telling you that I usually
put my props after my desk, so let's be consistent now.
Finally, I'm going to create on this button right here.
I was just toggling the value here.
So now that I have this method,
I'm just going to call it whenever somebody clicks.
It's a little bit cleaner to put things in methods.
That way, you know where all the code is
that is not the template.
So that's going to be a little bit better for us, right?
Let's go into the actual dropdown
and see some of the things that we need to do there.
So the cartdropdown is going to need some things.
So I'm going to import the currency component.
And then in our X-bar default, we're going to
receive some props.
So we'll create an array here and we'll receive the cart
as well as that displayCart variable.
And since we're using the currency component,
we will also make sure that we put it right there, right?
And also I want to make sure
that this dropdown only shows up
if the cart pass something in it.
So we'll do, if it's greater than zero here,
we'll save that.
And this cart has dropdown styles.
So this is where the styles are, their backup here.
So we're going to remove them from here.
Now this doesn't need a style anymore.
And then the cart dropdown.
We'll just add the styles right here.
And we'll give that a save,
and that should work now.
It looks like a little bit of a parsing error.
It looks like it's on Navbar.
So let's take a look there.
Let's see.
So returned as card.
It's usually like, I forgot a comma.
So that's pretty common when you move things around,
watch out for those commas, they can really cause havoc.
So you could see now that once it loads up the data,
we get our application back,
everything's working pretty well.
Let's try adding something to the cart,
clicking on the cart to receive
even the dropdown animation working.
So that's looking pretty good.
That was one of our final moves.
We're moving the cart around.
And again, most of the time as you experiment
with moving things in vue, it's going to be all about
passing the props, moving the methods
and you should always try to minimize the amount of code
that is in your app. that vue file.
But sometimes you do have to put things in there
but notice that our template is actually extremely short
all we have is a Navbar
and then this div to make it look nice
and then this router with different elements in there.