- [Instructor] I'd like to create a dropdown
with a list of the different items
that I've added to my cart.
It's going to involve a little bit
of what we've done already here with lists,
so it's going to be good practice.
But it's a little more complicated than it looks like.
I'm going to start off by just creating the dropdown
using some Bootstrap code.
So I'll need to go to the nav section right here,
and here's the place where I have the text for the cart,
and right now I'm using the cart length
to display the length when something is added.
Now, I'm going to start off by getting rid of this if statement
just so that we can see things a little bit better
while we're doing the project,
and I'm going to go ahead and hide this for right now.
So this is going to be a little bit
of just regular Bootstrap code.
I'm going to type in a button
so that I can activate the dropdown.
And I'll use the green button
and the small version of the button,
and this is going to use or drop down an element,
so I'll have to use dropdown-toggle here.
I'll give it an id,
and as per Bootstrap,
I'm going to add a data-toggle attribute of dropdown.
So this is what's going to make it work.
And then I have to add a couple of properties
for screen readers.
I'm going to leave this cart section just like it is right now
and close out my button.
Alright, so if I preview this,
you should see the button up here.
It looks like I've missed something here.
And...
Looks like I used the minus sign here,
and that's what's causing the problem.
That's what's kind of nice about preview in this,
and CodePen,
is that you get immediate feedback.
So I made a couple of typos there with minuses,
but that's working.
So now, I can activate a dropdown,
and I need to start making the dropdown.
I can do that after the button.
This is going to be a dropdown menu,
since it's part of my navbar.
I'm going to align it to the right,
because as dropdown items happen,
my dropdowns will be aligned,
normally, to the left,
and as this text gets too long,
it's just not going to be readable.
So we're using this class to align this to the right.
And, again, some classes for screen readers.
And here's where I'm going to put another div
that's going to have my v-for statement,
and it's going to loop through the items in my cart.
So I'll do a div.
Here, I'll use the v-for statement,
and I want to go through and get the item
as well as the index for each item
in whatever we put in the cart.
I'm also going to need a key.
You should almost always add a key to your v-for loops,
but it's going to be important for what we're doing here.
So as the key,
I'm going to pass along the index,
because if I passed along the item id
like I have in the other list,
as we add along similar items,
you would actually have a problem
with Vue.js trying to use the same id
for multiple elements.
It doesn't like that,
so I'll just use the index in this case.
So now I can put the item
for each one of the elements that I wanted here.
So I'll use a div,
and this one's going to have a class of dropdown-item.
Again, this is just a Bootstrap class.
Actually, it'll be dropdown-item-text.
Now, normally in dropdowns,
you want to use anchor tags
if you want the dropdowns to link to something,
but in our case,
our lists are going to have lots of different information.
So, eventually,
we're going to want the quantity for each item,
the text of the item,
and a (mumbling) item.
So I'm going to switch over to dropdown-item-text,
and I'm going to make sure that the text doesn't wrap,
and it aligns to the right.
So I'm really using a lot of Bootstrap's features here.
It's pretty easy to learn,
so there's a separate course that you can use
called Bootstrap Essential Training,
just look it up,
where I teach you all the features of Bootstrap.
Now I'm going to add a badge.
This whole badge is sort of like a circle,
and I use badge-pill.
It'll be a circle around an element.
You can give it a color class,
so badge-warning,
and I'm going to use align-text-top on the badge,
otherwise it won't center properly and vertically.
I'm also going to give it a little bit of a margin
with the Bootstrap space in classes.
And now in here,
I can finally add in the item quantity.
And then I'll close out my span,
close this out right here.
Alright, that looks pretty good.
So I have my badge,
and, in addition to that,
I'm going to add the item name
and also the price for the item.
So I'll put that in a tag for right now.
And we'll just use an expression to type in the item price,
and I'll use my currency filter.
Let's take a look at that preview.
Hopefully, we did everything correctly,
and we can start adding items here.
And if we click on this dropdown,
we should see all of the items.
Now, by using realistic examples like this,
I think I can give you a better flavor
of the types of things that you have to do
with real projects.
I love using Bootstrap with other frameworks,
because it makes it easier to build things
without having to create so many classes for elements.
Bootstrap has this convenient dropdown element
that you can use,
and we'll see how else we're going to have to change this
in order to make things work,
continuing in the next video.