- [Instructor] Okay, now that we're allowing users
to add items to their cart,
it's equally important that we allow them to remove items
from their cart.
And this process here is actually going to be
a little bit different than what we saw previously
with adding items to the cart.
And here's why.
The button that's going to be triggering the removal
of an item from our cart,
this remove from cart item here,
is contained inside its own component.
That's the product list item component
that we implemented a while ago.
And this product list item component in turn
is displayed by the product list component,
which is displayed by the cart page component.
Now it certainly would be possible to have
each individual product list item component itself
make the axios request to the server.
However, in order to have the page update correctly
when the request completes,
it'll actually be much better for us to have the logic
for making the network request
inside the cart page component, where our data is.
So what all this means is that we need to have
the click event from our button here
sort of bubble up to the cart page component.
And in Vue, this doesn't happen automatically.
We have to make it happen ourselves.
So here's what it's going to look like.
Let's start by opening up our ProductsListItem.view file.
And then what we're going to do is this.
We're going to use the v-on directive with our button here
to listen for click events from our remove from cart button.
And when this happens,
we're going to make our products list item component
emit its own event,
similar to how the button emits it's click event,
view components can emit their own sort of events,
and we can call these events whatever we want.
So here's what all this is going to look like.
We're going to move our button here just for readability.
And then we're going to say v-on click equals.
And then for what happens
when this button is actually clicked,
we're going to add a string here,
and we're going to use this dollar sign emit function, okay.
And basically this is something that Vue provides for us
that lets us have our components emit their own events.
So the first argument that we pass here
is the name of the event that we want to emit.
Since again, we get to pick,
we're going to call this remove from cart, just like that.
And then the second argument that we can pass
is the extra data that we want to pass along with our event.
In our case,
we'll want to pass along the ID of the product
that the button got clicked on.
So in that case,
it's just going to be product.id,
since we have access to the product
from our props down here.
So now that we've done that,
the next step here is to open up
the products list component.
Let's open that up here.
And then we're going to listen for this custom
remove from cart event that we are emitting
from our products list item component.
And when that happens,
we're going to emit one of our own events
from our products list component.
So here's what that's going to look like.
Right under the v-for thing here,
we're going to add v-on,
and then where we would normally say v-on click
or v-on something else,
we're going to say v-on remove from cart,
which remember is the custom event name
that we just defined, okay.
And when this event happens
we're going to say dollar sign emit,
and we're going to have the products list component
emit its own remove from cart event, okay.
And the way that we sort of allow this product ID thing
to bubble up through this event
is by saying dollar sign event and passing that
as a second argument.
Don't worry too much about these details.
They're really just kind of quirks of Vue
that you get used to after working with it
for a little while.
At this point we have our products list item
emitting its event.
Our products list is listening for that event
and helping it to bubble up.
The last thing we have to do is open up
our cart page component and listen
for this remove from cart event there.
So let's open up our cart page,
just like that.
And then up here, inside our products list,
here's what we're going to do.
Pretty much the same thing that we did
inside the products list with the products list item.
Is we're going to say v-on remove from cart.
And when that happens,
we're going to have to define a new method
for our cart page that'll get called.
And we're going to call this method remove from cart.
And the way that we make sure that the product ID
gets passed to it correctly is by saying dollar sign event.
Again, that's just sort of a little quirk,
don't worry too much about it.
And let's just make sure that the syntax there is correct.
So now what we have to do is we just need to define
this remove from cart method that'll get called
when the event bubbles up to the cart page.
So let's go down here and right underneath computed
we're going to create a methods property.
And inside that methods property
we're going to have async remove from cart.
It's going to take a product ID as an argument
that'll bubble up from the original event.
And we're going to say inside here
const results equals await axios.delete.
And then in back ticks we're going to say slash API,
slash users, slash 12345, slash cart,
slash and then a dollar sign, curly braces, product ID.
Okay.
And when we get that result back we're going to say
this.cart items and update our cart items accordingly.
Remember that this delete endpoint returns
the updated cart items from the user.
So we're going to say cart items equals result.data.
Okay, so now let's head back to our front end
and test out the method we just created.
So we should be able to now click on remove from cart
and it should successfully remove whatever item
we click on from the cart.
And that looks like it works.