- [Instructor] So the first page we're going to implement here
is the products page.
And remember that the main purpose of this page
is going to be to display a list
of all the products available on our site.
For the moment that will be the 12 objects
in our products array that we copied
from the exercise files.
So let's open up our products page.
And here's the first thing we're going to do.
We're going to start off with our script tag here.
Earlier in the course,
we just defined this default export here.
And there's just one thing that we have to add to it.
Now that we have data that we want our component to display,
that's the products array we just saw
that we just copied and pasted from the exercise files.
What we need to do now is we need to add a data property
to this default export object.
Now in components, this data property,
which is going to look like this, is going to be a function.
That's just the way that view components work,
and what this function is going to do
is it's going to return an object
whose keys we can use inside of our template
to display different pieces of data.
We'll see exactly what this looks like in a second.
So we're just going to say return
and we're going to return an object.
As an example, what if instead of hard coding the titles
for our pages,
we wanted to provide this title as data
just like we want to do with our products.
Well, what that would look like is this.
We would add a title property
to this object that we're returning from our data function.
So we could say something like this,
say title, hello everyone.
And the way that we would actually display this value
on the page would be like this,
inside the h1 tags,
instead of having our hard-coded title,
we'd put double curly braces
and then we'd put title right inside it, like that.
And then if we run our app,
which my app currently isn't running,
we'll run npm run serve.
And if we take a look at our products now,
we may have to refresh it,
we'll see that it now says hello everyone as the title.
So basically what's happening is the title property
that we're returning from our data function here
is getting inserted into the template for our component
and then rendered to the page, okay.
So where all of this links into what we actually want to do
on this page is this,
what we want to do is inside our script tag,
we want to import the products array from the fake data file
that we just copied and pasted.
And that's going to look like this.
We're going to say import products from ../fake-data, okay.
And then what we want to do
is we're going to remove this title thing here
and we're going to pass these products
to our page as data, okay?
Now the tricky part here is that products is an array
so we can't just display it to the page
by saying something like that, right?
And this brings us to another concept in View
called the V-FOR directive.
That is V dash F-O-R.
Now basically the V-FOR directive
is how we take a raise of data
and translate them into a series of HTML elements in View.
So here's what that would look like
to display a div for every product in our products array.
And I'm going to just delete this heading here for now.
What we would say is we would say div
and then we would say v-for equals
product in products.
And then once we've done that,
inside of this element that we've called v-for on,
that we've used v-for as a sort of attribute on,
we now have access to the product variable
that we got from here, okay?
So for example, what this means
is that we could say things like h3,
product.name, and this will display the name
of each of the individual products inside an h3 heading.
Now, before this will work though,
there's something else we have to do.
When we use the v-for directive, as we're doing,
View requires us to provide a key attribute
on the element that we're duplicating.
This helps with re-rendering logic behind the scenes.
You don't need to worry too much about the details
if you don't know 'em.
So basically all we need to do
is provide a unique key value
for each element that results from a v-for directive.
So in our case, here's what that's going to look like.
And while we're at it,
why don't we just add a class style here
for styling purposes?
We're going to say class equals product-item,
just again, for styling purposes.
And then underneath this
we're going to say something called v-bind.
And I'll explain what this is in just a second.
We're going to say v-bind:key equals product.id, okay?
Now you might be wondering what on earth
this v-bind thing is.
This is another View directive.
And the purpose of it is to allow us to insert data
from our component as attribute values.
In other words,
we do this instead of what you might've expected here,
which would be doing something
like key equals and then using double curly braces
to insert the value of product .id.
No, what we do in View instead
is we use v-bind:
and then the name of the attribute we want to set,
along with the data that we want to set for that attribute.
And we'll see more examples of this later on.
So don't worry too much about it
if you don't quite understand it yet.
So now that we have that,
let's add in the rest of the pieces
of our products page template.
This is going to be pretty straightforward.
What we're going to do basically
is we're going to add a surrounding div here
with the ID page wrap, okay.
And we're going to add another surrounding div
and I'll fix the indentation for this in just a second.
This div is going to have the class equal to grid-rap,
just for styling purposes again.
And then we're going to indent this content here a little bit
and add the closing tags.
And then we want to keep this h3 heading.
The only thing we want to do to it
is we want to add a class equal to product-name,
which again is just going to be styling stuff.
And above that, we're going to display an image for a product.
And here's how we do that.
We're going to say image,
and we're going to use the v-bind thing again
to set the source property of the image
to product.imageUrl.
Remember that each of the products in our fake data file
has this imageUrl property
that's basically just a link to the URL of the image
that we want to display for a given item.
Okay, so that's all we have to do for that.
Then underneath this h3 heading,
we're going to put a paragraph tag
with the class equal to product price.
Then we're going to put a dollar sign there
which is literally just going to display as a dollar sign.
There was no kind of syntax thing going on here.
And we're going to say product.price
and close the paragraph tag.
And then what we're going to do
is we're going to have a button here that says view details.
And this will link to the corresponding product detail page
for each of our products.
And we're going to say slash button.
And the way that we're actually going to link this button
to the corresponding product detail page
is going to look something like this.
We're going to use a router link component.
Remember that we looked at that very briefly
in the navigation bar that view router generated for us.
And what we need to do here
in order to link it to the correct page
is just say v-bind to equals,
and then we're going to say inside double quotes,
we're going to have single quotes.
You'll see why this is in a second.
We're going to say products slash,
and then we're going to append on the product.id, okay.
And what we're going to do
is we're going to wrap this button in this router link,
which means that when it gets clicked
it'll simply act like a regular link would.
Now the part here that you might be wondering
is why we're using this router link thing here
instead of a basic anchor tag
with an H ref attribute, right?
Basically, using this router link thing instead
allows View to navigate between pages
without doing a full page refresh.
And this improves user experience and performance
since the app doesn't have to be reloaded
every time we change pages, right?
So now that we have all of that,
let's take another look at our app
and hopefully all this stuff will work
just like we want it to.
Sure enough, we see that we have all of the products
along with their images and information
displayed on our products page.
And all of that looks pretty good
just because of the styling that we copied and pasted.
But the point here is that all of this is working
behind the scenes.
And if we click on one of these view details buttons,
that'll take us to the corresponding product detail page
for each of those items.