- [Instructor] We need to find a way
of deleting an item just in case I'm purchasing things
and I realize that I don't need this
many Bamboo Thermal Ski coats.
So I'm going to add a delete button right here.
So to do that, I'm going to go into my HTML first,
and then find a place where I am listing the items,
and I'm going to create a link here,
and because it's a link I need to put something in the HREF,
and then I need to target the click event.
I can use the v-on directive or again use the shortcut
which is just an add sign.
And in here, what I want to do is call a method
that I will be creating called deleteItem
and pass along the index.
So this index is coming from this loop,
as they go through each of the elements.
I'm asking Vue.js to generate an index
and I'm passing that along to deleteItem.
I'll go ahead and put in a minus sign in there.
And then we need to add some Bootstrap classes
to make it look nice.
So badge, badge-danger, and text-white.
I think that should be showing up if we add some stuff here.
We should be seeing it there.
It's not really working quite yet.
So we need to create the deleteItem method.
So I'm going to find the addItem, which is right here,
and I need to put it after that.
So sometimes collapsing
these little triangles is really helpful.
This is one of those instances.
So deleteItem is going to be a function.
It's going to receive an ID.
It's just going to be coming from the index.
And I also need to make sure I add a comma right here.
And this function is going to be pretty simple.
I'm just going to say if, we're going to go to the cart,
and find the element with the ID
or with the index that matches this ID.
And then we're going to say if there is that element
and it has a quantity that's greater than one,
so if it exists and it has a quantity of any kind,
greater than one,
then what I'll do is I'll decrement that quantity.
Otherwise, so if this an item and there's only one
of them left in the cart,
then I go ahead and delete it.
So I need to use the Javascript splice function,
and pass along the ID.
And just say that I want to remove one item.
So again that's pretty cool.
Let's see if that works.
So now, I'll add some items here.
And let's open that up and try to delete one.
So see I have five items now,
and when I delete one,
notice that if I click on that again,
I now have four items.
And notice that this is one of the beautiful things
about React, I didn't have to update the total variable,
or even the items variable.
The computative properties noticed
that I had modified that cart
and so it automatically updated the price
as well as the quantity of items for me.
Now there's a problem here and that is
that when I'm clicking on these buttons,
the dropdown is collapsing.
And that happens just because of the way
that dropdowns work in Bootstrap.
So I can add something called a modifier.
And this is pretty awesome,
and there are a ton of different modifiers.
You can look at the documentation for them,
but they allow you to take care of things,
like for example, stopping the propagation of an event.
This is what we want to do here,
because the event is triggering the release
of this dropdown.
So by stopping the propagation, we can go ahead
and stop the dropdown from folding up again.
So we'll find the place here and add the stop.
And we'll add the stop modifier.
And now, let's go ahead and add some items here.
I activate the dropdown and I can delete these items.
And notice that it doesn't collapse the dropdown.
This is also cool, notice that if I delete this last one,
it gets rid of that whole record, using that splice.
So if I delete all of them, I have
this little funky thing here so I'll fix
that by adding a v-if statement.
Right here, I'll say v-if cart length is greater than zero,
we don't have to worry about the individual items here,
we can just check to see if there is anything in the cart,
and if there is any items in the cart,
then it's going to hide this little dropdown,
we won't really even see it.
And then, when we add items, it'll appear.
And if we get rid of the last element, it should disappear.
You can see that combining Vue.js
with Bootstrap it's pretty easy.
And the ability to use modifiers,
and as I mentioned there's a lot of modifiers
that let you do things like prevent default behavior,
this particular propagation modifier.
And there's a ton more.
You can check the documentation to see what works for you
in different circumstances.