- [Instructor] Okay, we've got our products page
to load its own data correctly.
Now let's do the product detail and the cart page.
So we're going to start off with the product detail page.
Here's what that'll look like.
Let's open up a ProductDetailPage.view right here.
And just like in our products page,
we're going to start off by importing axios
inside the script tag, import axios from axios
and then we're going to delete this fake data stuff
just like we did before, since we don't need it anymore.
And instead of setting the product based on fake data,
what we're going to do is just delete this
and have the product start off as an empty object.
And once we've done that, just like in the product page
we're going to add a created method here, okay.
And it's going to have to be async since we're going to be doing
some asynchronous logic inside of it.
And loading the product from the server
is going to look something like this.
We're going to say const result equals await axios.get
and for the URL here, it's going to be a little bit different
than what we saw before.
We're just going to say, we're going to use back ticks here
so that we can use a template string.
We're going to say, /api/products/
and then we're going to insert a value into here.
And the value that we're going to insert here
is going to be the ID of the product
that we're looking at on this page.
If you're a member, we can get that
by getting the pages ID, URL parameter, okay?
So the way we do that again
is by saying this.$route.params.id, okay?
So at this point we have the response
from sending the get request to the server.
The next thing we're going to do
is say const product equals result.data,
that's where the product that we're sending back
from the server is going to be found.
And finally we can just say this.product equals product.
And that should be about it.
If we open up our product detail page now,
by clicking on one of these,
we should see that it loads the data from the server
and displays it successfully on the page, which is great.
So that's the product detail page.
The last thing we're going to do,
is we're going to switch over the cart page
to load its data from the server.
So let's open that up and it's going to be very similar
to what we've seen so far.
Down here, we're going to import axios from axios,
we're going to delete the fake data here.
We're going to set the cart items to an empty array initially.
And then down here underneath the computed properties
we're going to add the created method.
And inside there, we're going to say
const result equals await axios.get.
Man, that reminds me that this should be async too.
So we'll wait, axios.get,
and the URL here is just going to be /api/users
and remember that we're hard coding the user's ID
in this course, 12345/cart.
Here and then underneath that,
we're going to say const cartItems equals result.data,
underneath that we're going to say
this.cartItems equals cartItems, all right?
And now, if we go to the shopping cart
and see the cart page,
we should see that that successfully loads
the data from the server.
And one thing to note too,
is that this computed property down here
that we're computing the total price of all of our things
starts off at zero.
If you look very quickly
it starts off at zero and automatically updates
when we update the items in the cart.
If we had just set this total here,
total price, as one of the data points
we would have to physically update
this total price data point down here right?
We would have to recompute and say,
this.totalPrice equals blah, blah, blah, okay?
Now obviously that's kind of inconvenient to do so
it's usually best in those situations
to just create a computed property for that.
Just that's just to show you what computed properties
are really for in the grand scheme of things.
And just one more thing to note here
is that depending on how you set up your Mongo database
and the requests that you've made previously
while testing your server endpoints,
there is going to be a possibility
that your cart doesn't actually have anything in,
for example, if you hit the delete item
from cart endpoint too many times.
and just make sure to check that
if it looks like your page, isn't working for you.
You may well have deleted all the cart items
when you were making postman requests
in previous chapters.