- [Instructor] Let's finish up this application.
It looks like right now when I try to add some items
I'm having a problem here with the numbers.
In those cases you want to go to inspect
and take a look at your console.
I'm noticing a couple of errors here.
What it's saying is that the key isn't defined,
and that is a problem right here in these loops.
So I'm going through all of the elements
to add up the total as well as the quantity,
but that doesn't work in this code.
So I need to make sure that the variable key
is predefined, and I can do that
by just adding the let statement right here,
and let's go ahead and save that.
You can see now that if I add everything
it's going to get the right price here.
Now my deleting isn't quite working,
so let's take a look at that.
Actually let's go back to inspect
and take a look at the console
and see if we get anything here.
So, what's happening is that delete item isn't a function.
So, that probably has something to do with what's going on
in my nav bar as I am trying to click on that button.
Let's look for the delete item button,
and I think most of it is the difference
between running something from a single page Vue.js document
versus using these componentized versions.
The JavaScript is almost the same
but sometimes slightly different.
So, let's take a look at where I create the dropdown,
which is right here,
and then here is where I delete the item.
So this is looking for a delete item method
inside this component, which it doesn't have that.
This delete item component exists in the parent,
so here I need to emit so that I go back up the chain.
So let's go ahead and do that.
I'll do an emit statement,
and what I want to emit is something I'll call delete,
and also pass along the index of the element
that I want to modify here.
Now I do want to make sure that the stop modifier
is here to prevent the bootstrap dropdown
from going back up.
So, let's save that, go back into App.vue,
make sure that I capture it in here.
So, let's go ahead and do...
in the nav bar this delete event,
I'm going to capture and send that to my delete item method,
which is in this component.
So that should be down here, right here.
So, let's take a look, save that,
and it's going to reload everything.
Let's go ahead and add some things here.
Take a look at the dropdown,
see if we can delete some items.
So that looks really good.
Oops, let's try that again, oops.
When I delete the last one
it goes away and everything so that's fantastic.
So let's actually add a couple more here,
and take a look at what I get.
That is working pretty well.
So, that brings in most of what we did in CodePen,
and we've got this really beautiful
componentized version that makes everything
be self contained, which is a really good way
of programming your Vue.js projects.