- [Instructor] I want to show you how to work with Chrome
developer tools but before I do that I did want to mention
something that's going on right here and this is something
that Visual Studio Code is telling me about using a V if
statement whenever I am inside a V for.
The problem is that V for has more power than the V if
and if you're using them together like this, chances are
that it's going to loop through all of the elements
in the V for loop even if you have a V if statement.
And they recommend that you put your V if statement
outside the V for statement.
Now that's okay except that I am using V if here
to filter these things and if you look at a documentation
you can see that this is actually a good way of using
V if and V for.
However the linter that is checking things for me
in Visual Studio Code is not totally convinced
and that's okay if you're doing something that gives you
this sort of warning slash error if you know
what you're doing.
So having said that, I'm going to show you how to work
with the Chrome developer tools.
So the Vue developer tools allow you to take a look
at what's happening with your Vue application
and that's going to be really useful so I suggest
that you install them and I've already got them installed
in my browser and what they do is if you inspect elements,
so I right click to go in Inspect Element, you'll get
an extra tab right here called Vue and it's going to show
you what's happening with your application and even all
of the different components that you have available
to you and then what is happening in each of those
components, so if we go to App we'll notice that here's
all the products, here's the maximum and in product list
we'll notice that we can even find out when events are
triggered, so right now we've got this plus sign
and it's really not doing anything except that notice
when I click on these little buttons here if you look
over here on this tab it's going to show you every event
that is emitted by your application.
So what's happening here is that when somebody clicks on
one of these buttons I am emitting an event and this event
is called Add.
And it's passing along information about the item that
I'm clicking on and right now there isn't anything that is
catching this item over here.
So if you look at where I'm using the product list
you'll notice that I'm not capturing that event.
So I need to make sure that I do that, I'll do add
and when that event happens inside of the component.
I want to make sure that I trigger something called add item
now add item hasn't been moved into my component here
so I need to make sure that I go back into my code pen code
and grab it from there.
And so what I need to do is grab the whole thing.
Sometimes it's easier if you collapse them and then just
make sure you grab the whole line like this.
And then I'm going to go back into my code and I'm going
to add them as methods right here.
And I'll paste that one in.
I'm going to delete this last comma because right now
it's going to be the only method in my application
and so now when product list emits that event,
remember emit is how you pass events from a child
component to a parent component it captures it right here,
that add event.
And then it calls a local function add item with the value
that we pass right here called item, so it'll come up
here and it'll go to add item, it'll perform all this.
Now this is looking for something called cart that I don't
have in this component quite yet.
So I'm going to add cart right here to my local variables
and I'll give it a beginning value of empty and now I'm
going to save this and let's take a look at what's
going to happen when I click on an event.
So let's go ahead and go to Components, I'm going to make
sure that I'm in app and you can see the cart now exists
here but it doesn't have anything in it.
When I click on this plus sign, you'll notice that an event
took place but cart didn't appear to activate,
so let's hit Refresh.
And the reason this is happening is that Vue.js
is really efficient about how it updates things,
so because it noticed that there's actually nothing
happening in the dom with anything, sometimes it doesn't
show that something's been updated even though you saw
that when I hit that add button I got an object here
and it added that element to the quantity let's go ahead
and add another one.
Let's actually add a couple and hit Refresh and you'll see
that it added three of them now.
And if I go here I'll add a couple of these, refresh,
and now I can see the other element that was added
to my cart right with a quantity of two.
So this Vue Chrome extension really gives you a way
of tracking exactly what's going on with the application.
This is pretty cool, when you click on an event it shows
you things like the event type and the payload
which is the things that are being passed along
through the application to the methods.
So I highly recommend that you install and even that you
play around with the Vue Chrome extension because it's
really going to make your ability to program things
a lot easier.