- [Instructor] I know you've been waiting for this.
Let's take a look at how events work in Vue.js.
The way you check for events being triggered
is with the v-on directive.
Now, this lets you listen to the DOM
and run some JavaScripts when events are triggered
and it looks like this.
You use the v-on keyword, use the v-on directive,
and then you type in the name
of an event like the click event
and then in here you can put in some JavaScript
or call in a method if you want to.
Now, there is a shortcut by using the at sign,
you can get rid of the v-on colon.
And this is the way that you'll see this used most often.
So you can say at click and then execute a method.
Now, if you don't include anything with the method
it's going to automatically send event information
which you can capture by receiving a variable
and then using that variable to do something
in your application.
You can also pass along arguments.
So if you have a, myMethod and you want to pass along
some variable, you can just include it like this
and then receive that into a variable in your method.
If you still want to receive the event,
you can pass it along
with a special variable called dollar sign event
and then receive that into a variable in your method.
And then you can do something with it in the application.
You can also pass multiple methods or call multiple methods
on a specific event by separating them with commas.
There is a number of event modifiers
that will modify of course,
the way that the events are handled.
So for example, you can use the prevent method
to prevent the submission of a form
so you can check for a submit event.
And then add that prevent, and we always do that whenever
we are working with a dynamic application in Vue.js
and that's because the normal behavior for a submit event
would be to submit the form to a form processing script.
Not because we want view to process the script.
You may want to add this to prevent the default behavior.
There's also stop or stop propagation and a number
of other events that you can use when working
with the different events.
So here's what it looks like.
You can add something to the end of an event.
So I mentioned submit here, and you can add more than want
but this is how you would prevent the submission of a form.
And you would have it processed by whatever was
in my method right here.
Now these correspond to regular JavaScript Event Modifiers.
So you can take a look at the documentation
for that at this URL.
There is also some Key Modifiers.
So when you're using the key events
like key up and key down
and other key related JavaScript events
you can check to see that any of these keys
are being impressed during that event.
There's also a way to check for special keys
like the Ctrl, Alt, Shift, and also the Meta key
and the Meta key happens to be the command key
on a Mac and the windows key on a PC.
So this is what that will look like.
You just call the event
and then use one of the Key Modifiers.
There's also a special modifier called the exact modifier.
And that assures that some event is only going to
be triggered if the events and the modifiers match exactly.
So in this case, we're only going to execute myMethod
as long as we have the Ctrl key down
while someone is clicking on this button right here.
If I were to remove this right here
and just called an exact click, the click would only work
if no keys were currently being pressed.
There's also some Mouse Modifiers.
And this means you can check for it clicks
on specific buttons on a mouse like the left, the right
or the middle button for those mice that have that.
All right, so I prepared a little problem
for us to work through.
Let's take a look at how this works.
Now we've got essentially
what's going to be a continuation of our shopping cart.
And in here we have a little placeholder for the total.
Once we start adding items to the cart
we're going to get an amount of all the elements in there.
And then we're going to have a list
of how many items there are in the cart to add things
to the cart I've added these buttons
and you can see the buttons are down here,
right here is the plus button that we see right there.
And then at the top, there's a little section
with a button that's going to show the shopping cart.
This button is going to trigger a dropdown
that is going to show the list of items in the cart.
I'm using Bootstrap for this project
but I haven't loaded any of the Bootstrap JavaScript.
So we're going to use Vue.js to take care of things.
So let's take a look at what this looks like when it's done.
And as you can see, I can click on this plus button
and it's going to add items into the cart
keeping track of the items that I've added in there
so that you get a total
of the items that you put into the cart.
And if you open this up, you'll see that it pops up
a dropdown with the items that you have added.
So let's see what we're going to do.
We're going to create a cart array to haul all
the cart elements, we are going to program the plus sign
so that we can add items.
We're also going to display the cart items in a dropdown
and we're going to make the cart icon toggle menu
so that it drops that dropdown with the information
on the items, can also show the total
and the quantity on the menu as I've shown you.
So let's go ahead and take care of it.
Right, first thing first, let's go ahead
and make this window smaller so we can focus on the code
and I'm going to need to add a cart as well
as a few other icons to keep track of things.
So I'm going to create a cart variable.
This is going to be an array.
And then I'm also going to create a variable
for whether or not we should display the cart.
And we'll set that to false
because we don't want it to be showing.
And I'm going to put that one right here
and let's go ahead and start working on the addition.
So we need to look for that button
so that we can program it to add things to the cart.
So for that button, I'm going to add
a click event pretty easily.
So we'll say at click
and then once somebody clicks on this button
we're going to execute a method called add to cart
and we'll pass along the item that we have clicked on.
So if you remember, I'm using a loop
to loop through all these items and display them.
So I do have information about the item.
And so when I add an item to the cart
I'm going to pass along the information for each item.
And that means that I need to create
this method called add to cart.
So we already have a methods section in here.
So we're just going to add another method called add to cart.
And we're going to receive a product here,
which is the same as an item.
Sometimes I like to just call them something different.
And then all I need to do here is go ahead
and push something into the cart array in
what I'm going to push is a product.
Now I'm adding products
and it's going to generate a list of items.
A lot of them will be the same.
If I was doing a real cart, this would be probably
a little bit different, but let's keep it simple.
Since this video is just about events.
So we're pushing things into the cart and let's see
let's go ahead and figure out how we calculate the total.
So for the total, I can make that a computer property.
So we'll go ahead and add something after filter products,
cart total, and this is going to be a method
that returns we'll take the current cart
and we'll use a JavaScript reduce function,
which will allow us to keep track of an incremental
and go through each item and casting into a number.
We'll take each one of the prices of the items
and add them to the incremental.
And we'll add a initial value of Sierra.
So this is just the straight up reduced function
which is a normal JavaScript function.
And it's going to allow us to just add items into the cart.
So let's see, I'm not sure if this will be working out
look, it's actually, as I add these items
it's just sort of adding them into the cart.
And if we actually take a look at the dropdown
it looks like the cart total is not calculated
'cause we haven't used this variable anywhere
but the button is pushing things into the cart.
And as we notice right in this section right here
I was already using the cart variable.
So as soon as I hit the plus sign things, get pushed
into the cart and I can see them.
It's not adding them up yet.
So let's go ahead and go to that label.
So I went to display the cart total
which right now is over here.
And let's see, I can just kind of use the expression
and let's see, do we have, well, when it reloads
it take things out of the cart
and you can see that it is putting them in there.
However, because they're not consistently format it,
I can use my currency filter.
I'm just going to cut this out
and use the currency filter with the cart total.
And now that looks a little bit better.
So now we add things and it adds them
and it gives us the cart total right here, pretty cool.
However, this thing is definitely toggled on by default.
So we'll need to fix that.
And so what we'll do right over here
this will say cart length
because the cart has a certain number of items.
So as I add items into the cart
it's going to show me the quantity of items in the cart.
And I also need, so I have this display cart
as false right now and I need to go ahead and make it
so that I can toggle the visibility of the cart on and off.
So let's see where I do the dropdown right over here.
I need to add a V-if statement
And what I'll do here is say display cart.
If the value of this is true, then show dropdown.
So now it's not showing the drop down by default.
So I need to make sure that I can toggle the visibility.
To do that, We already have a button
that will take care of that
but we need to program the functionality.
So we will say, we'll capture a click event on that item.
And this is going to say, take the value
of display cart and make it the opposite of display cart.
Okay, So let's see now, let's go add some items in there.
And if we click on this, let's see, as I said display cart
and that should be display cart.
Let's try that again, we'll add some items
and then now we can toggle this on and off.
The items are being tracked and add it in
by using some methods as well as some events
that's working pretty well.
So you can see that, events especially click events
are probably going to be the ones that you're going to use
the most and they're fairly easy to implement.
And there's clearly a lot of options
that you can add to them.
We'll be running into some of these
as we continue with this course.