- [Instructor] One of the most useful things
that view can help you do is rendering lists of data.
To do that, we use a directive called V-for,
and here's what it looks like.
The V-for directed lest we create a temporary variable,
which I'm calling here my item
from either a number, an array or an object.
And here I'm calling that my element.
Then you can use that temporary variable in an expression
or a more complicated template as you loop
through each of the value in my elements.
If you want to just repeat something a few times
you can use a number for the element
and then the loop will repeat the expression or template
that many times,
You can use of instead of N so that it looks more
like how JavaScripts similar command would be written.
You'll probably see that in notation more often
when looking at view code.
You can add an index variable
and this will give you a number
for each instance of the list.
Like with any other array, the number starts with zero
instead of one.
So here, what it would do is print out the number zero
for the first element,
and then go through the different numbers
as it loops through each item in my array.
GJS will keep track of changes to your list,
but it uses a strategy where it patches element displayed
in place without moving them.
So if you want a view to be more precise, it's a good idea
to include a key from your array or list and pass it along
in this V bind key parameter here.
Now, this would mean
that you have an item in your array called ID.
You can also use V-for to loop through an object
instead of an array.
And that will let you navigate through all the properties
in an object, which can sometimes be useful.
If you include a second parameter
you can use that to output the key of the object.
And a third parameter would become the index,
just like before,
Note that just like with JavaScript,
the order of the object keys
isn't guaranteed to be consistent.
Because you're rendering lists of items
it's natural to use HTML list acts
which have a parent UL or OL container.
However, sometimes you just want to render items
without having to display a parent container.
And in that case
you can use an HTML template tag like this.
Now that tag will not be rendered
instead, you will get copies of the content inside.
V-for supports JavaScript mutation methods
which change arrays and trigger updates to your object.
You can also use replacement methods like filter and concat
which won't change the array.
If you want more information about V-for
make sure you take a look at the documentation.
Lets try this out with a problem and solution.
Now here's what it looks like when you get started.
We've got a list of products right here
and there's three of them right now.
And in our HTML section
we have a simple template that we want to use that list on.
So here's what you need to do.
First use V-for to repeat the template 10 times.
Now modify that so that it displays the products
and then display the item number with an index.
Finally, we'll pass the products id as a key.
The solution is right here.
And if you want to take a look at the difference
between the two, you can go to this URL.
Here's what it looks like when it's done.
You should have a list of these different products
using the template to print each of them out.
And you should have a number right here for each item.
Remember that arrays are zero index.
So we'll need to add one to the index
for each one of these items.
So let's get to it.
Now, if all we want to do is repeat the list
of all these items.
Then what we need to do is add a V-for statement.
And I'd like to add all of my GJS special commands
right before any of the IDs or classes.
Now, sometimes I do like to add things
after the class attribute
and that's in case I'm doing some conditional classes.
Let's try adding V-for right here.
And what we'll do is first try out
how you would just repeat something a few times.
I said 10 times, and that's pretty easy.
What I'll do here is say for item in 10,
and we need to put this in quotes,
and you can see that it just repeats the items
a number of times.
Now that is not useful right now
but you could see where you could use that
to repeat a template a few times.
So let's see what it would look like
if we were trying to print out a list of products.
So instead of item in 10
we would say item in products here
and it would go through the list of products.
Now on each one of these
I have the label already for the elements.
So we could just put curly braces or mustaches
around these items.
However, we do have to add the keyword item
because we're going through the list of products
but as we're going through the loop
each one of them gets placed inside these items.
So we will say item dot name, item dot description
and finally item dot price.
Now, if we want to do the image
we would have to put a colon here.
And then we can actually just point to the image file.
And that one is actually called just image.
So that would be item that image here
that should bring up the image for each one of those items.
And then for the all tag, we'll do the same.
We'll just add a colon here to the all tag
and type in item dot name.
All right for the products
I'm also going to include a key.
I do have an ID for each one of these.
So as I mentioned, it's always a good idea to add it
if you do have an ID here.
So we'll go ahead and add the key parameter here
and make that equal to item dot ID.
And then since we want to output an index
what we'll do is type in item comma index.
And then what we can do is in our template,
when we print out the name,
am just going to make a copy of this one,
and I'm going to type in a parenthesis after
and then we'll say item dot index.
And actually I don't need to put item for that one.
So just index would work fine right here.
You can see that it is zero index
which means that we're just going to add one to it.
So this can be a regular JavaScript expression
which means that we can put in a number right here.
So that is pretty much what it would look like.
And you can play around with some of the other options
but you can see that once you have an object or an array
it's pretty easy to use V-for
to list a template of those items
with what we have available for us in GJS.