- [Instructor] So now that we've implemented
our Products page, let's move on to the Product Detail page.
So let's go open that up here,
and remember that what we want to do on this page is
we want the page to display the data
for the product whose ID is in the URL.
So for example, if the user goes to product/123,
we want to display data for the product with the ID 123.
So let's see how to do this in Vue.
The first thing we're going to do is just like
on our Products page, we're going to import
the Products array into our components script tag, here.
So we're going to say import products
from ../fake-data.
And next, we're going to add a Data property
to our default export object here,
just like we did for our Products page.
So let's add a Data function to it,
and we're going to say return object.
And for this page, unlike with the Products page,
instead of passing the whole
products array through, we only want to
pass through a single product as our component's data,
and this will be the product with the ID
matching the ID in the current URL.
So here's how we do that.
I'm just going to type it out and then
I'll explain in a second.
We're going to say product, which will be the key,
and then for the value, we're going to say products.find
and we're going to find the product whose ID
is equal to, and here's the sort of tricky part
that I'm going to explain in a second,
we're going to say is equal to this.$route.params.id.
And what that'll do is it'll give us the product
whose ID matches the current ID URL parameter.
So the only new part here, for you, is going to be
this dollar sign route thing.
Basically, inside our components,
Vue provides a number of different data points
that are available inside every component by default,
all of which start with a dollar sign like this,
and this dollar sign route thing is one of those.
So basically, $route just contains information
about the current route that we're on
and what we're doing here is
we're getting the value of the ID URL parameter
which just so happens to be in route.params
and then the name of our actual URL parameter
which, in our case, is ID.
So it's as simple as that.
And now that we have the correct product set
as our product data here,
what we're going to do is move up into our template,
and here's what that's going to look like.
I'm just going to code this out
just like I did with the other one.
So we're going to have a div that wraps the entire page
with the ID page-wrap.
Most of this IDs and classes here,
are just going to be for styling purposes, again.
So inside that, we're going to have div ID
equal to img-wrap.
This is going to wrap the image
that we're displaying on the page.
So inside there, we're going to say image
we're going to use the V-bind directive here, as well,
and we're going to bind the source attribute of the image
to product.imageURL.
And note here again, that this product,
instead of like when we used the the V-for directive,
this product here, is referring directly
to this product property that we're returning
from our component's data function.
So that's where we're getting this from.
And now that we've got our image in there,
we're going to close this img-wrap div
and underneath there, we're going to create
another div with the ID of product-details.
And inside this div, we're going to have
an H1 heading that contains the name of the product,
which we're going to use curly braces here,
since it's the contents of an HTML element.
So we're going to say product.name
close that tag.
Underneath that, we're going to have an H3
heading with the products price.
This element is going to have the ID equal to price,
and we're going to use double curly braces
to insert product.price into the page, here.
Under that, we're going to insert the average rating.
So we're just going to, for that, we're just going to use
a paragraph tag and say something like Average rating
and we're not going to use anything
fancy here, like a star rating.
We're just going to display the out of five decimal rating.
So we'll say product.averageRating.
And then, at the very bottom here,
we're going to have a button
with the ID equal to add-to-cart.
And as you might've guessed by that,
this is going to be the Add to Cart button.
And we're not going to add any kind
of on click behavior to this, yet.
We'll get to that when we actually connect
our front end and back end much later in the course.
And underneath here, we're going to have
an H4 heading that says Description.
And that's just going to display, underneath it,
in a paragraph, the products description property,
so product.description inside curly braces.
And let's close our divs
and that should be all we need to do.
So let's take a look at our Product Detail page, now.
And we might have to refresh it.
And now we'll see that it looks pretty good.
And if you want to get a valid product ID
what you can do is just go back to the Products page
and click on the View Details button of any of these,
and it'll bring up that product
on the Product Detail page, along with the title,
the price, the average rating, the Add to Cart button,
and the description which, of course,
is just lorem ipsum, here.
So that is our Product Detail page.