- [Instructor] Let's take a look
at how events work in Vue.js.
To show you, I have added these buttons right here
at the beginning of each one of the products.
If we scroll down here, we should be able to see this button
right here with a plus sign and it's got a couple
of Bootstrap classes so that they look nice.
In addition to that, I've created this nav bar.
Let me show you where that is, it's right up here.
This nav bar is going to allow me to place
the number of cart items that I have and it's a nav,
so it stays up at the top because I have
this fixed-top class right here from Bootstrap.
Let's start first by, in our data, we are going
to add another reactive property here, 'cause remember
if we don't define it then it's not going to be a reactive.
I'm going to call this cart and I'll initialize it
with an empty array.
Then, in order to take care of an event, what I'll do
is find the button and then in this button,
I want to use the v-on
and this is how we do events.
Then I want to specify the event that I want it to look for.
In the case of buttons, this would be v-on:click.
It's sort of like the v-bind directive,
but it lets you manage events.
Then what we'll do is, in quotes, we'll say cart.push,
and then we'll pass a long one of the items.
That's really all you need to do
to populate events and push something onto a cart,
if we want to get a little more fancy.
Actually, we really can't tell that that's being done
unless we display the number here.
We'll do a cart.length here and once we add that,
then when we add an item,
you'll see that the cart will be populated
and it doesn't matter what we add from.
So, that's actually pretty simple.
Let's go ahead and add a couple things here.
I'm going to add a v-if directive and make sure that this
navigation bar only shows up
if there is something in the cart, so if cart.length > 0.
It's not going to show up at first but then
when we add an item to the cart, it's going to show up.
This is fine for this particular interface,
but you may want to create these things as separate events.
Instead of doing everything right here,
as your applications get more complex,
you may want to do this as an event call.
To do that, just like we added data
and we added this mounted property,
we're going to add an additional property called methods.
And methods is going to be an object
that's going to contain a list of all your methods.
I'll call this one addItem and it's going to be a function.
It's going to receive a product,
and we're just making up that variable,
and then we'll do the same thing that we did up there.
Here we have to use the this variable,
so cart.push(product) that we get from the call
and then instead of pushing directly to the cart right here,
what we'll do is we'll call this.
We'll say addItem and we'll pass along the item.
That should work in the same way,
but it's a slightly different way of doing it.
There's a couple other options that you can do with this.
You can do methods, computer properties, watchers,
and all kinds of other fancy stuff.
We'll cover some of those later, but you can see
that it's pretty easy to trigger things through events
with the v-on property and it's probably a good idea
to learn how to do things through events,
in this case by adding methods.