Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Learn how to loop through a data structure and keep code DRY using Vue's v-for directive.
Further Reading
v-for Syntax
<div id="app">
<ul>
<li v-for="item in list">
<p>{{ item }}</p>
</li>
</ul>
</div>
Raise your hand if you love
remembering the syntax, to write a for
0:00
loop in JavaScript.
0:03
I can't see you of course, but I'm willing
to guess there aren't a ton of hands up.
0:04
A lot of programming involves looping
through items in an array, and
0:09
doing something to those items.
0:12
Maybe you're pulling out
specific information,
0:14
sorting the lists in some way,
attaching event handlers.
0:16
There are a ton of reasons why we
might wanna loop through a list.
0:19
If you've built a JavaScript application
in the past, you may have looped
0:23
through a list, and used the information
to build up a string of HTML.
0:26
Perhaps that string of HTML grew large and
unwieldy, not so with Vue.
0:30
I have here an array containing
the seven colors of the rainbow.
0:36
What we wanna do,
is use Vue to loop through and
0:40
display the name of each
color in the rainbow.
0:43
If you wanna follow along with me,
download the starter files below and
0:46
open up the index.html file
in the folder called Rainbow.
0:50
We'll start by creating a new
Vue instance in app.js.
0:53
Remember the Vue instance takes an object,
and
0:59
we'll attach our new Vue instance to
an html element with an ID of colors.
1:02
Don't forget the hash.
1:12
Now let's create a data object.
1:16
Inside the data object I'll
name a property rainbow.
1:20
And set its value to this array up here,
called colorsOfTheRainbow.
1:25
Notice this time, I'm setting the data
property rainbow to the name of the array,
1:33
rather than dropping the entire
array directly into the data object.
1:38
This is just another way to keep things
a little cleaner and more organized.
1:43
This should be all we need here, so I'm
going to save and head over to index.html.
1:47
Here I'll create a div
with an id of colors.
1:54
Remember, I am calling it colors,
2:01
because that's the name we gave
the root element of our app.
2:03
Inside our app, I'll create an unordered
list element with a single list item.
2:10
To loop, we're going to use a view
directive called v-for on the element that
2:16
we wanna iterate, the list item.
2:20
I'll pass v-for the argument
color in rainbow,
2:25
this is a lot like a for
in loop in JavaScript.
2:30
The first word represents the single
item in the list we're looping through.
2:35
In is the keyword indicating that
we're looping through a list, and
2:41
the final word is the name of
the list that we're looping through.
2:45
So the second value here is the object or
array I wanna loop through or iterate on.
2:49
It must be a referenced by whatever you've
called the array or object in your data.
2:55
So if I wanted to display
my list of colors, this
3:00
must be called rainbow because that's the
name I've assigned to my array of colors,
3:03
in the data property on my view instance.
3:07
The word color here is arbitrary,
meaning I could call it anything.
3:14
Because it's simply a word or an alias,
3:18
that represents each item in
the list as I'm looping through it.
3:20
Now that I've attached this
Vue directive to my element,
3:25
inside of it I can use the word color to
represent each piece of data in my array.
3:28
So I'll demonstrate this by putting the
word color here in between curly braces.
3:33
Let's open up the browser and take a look.
3:41
You can see that all of
my colors are displayed.
3:45
Keep in mind that I
could use any word here.
3:48
And as long as it matches what's
between the curly braces,
3:51
you will automatically display
each item in the list.
3:54
So I could change this to item,
thing, or basketball.
3:58
And it's still going
to work just the same.
4:09
However, we always wanna strive for
clear and descriptive aliases,
4:12
so let's go back and
change it back to color.
4:15
Also keep in mind that
v-for should be placed
4:22
on the item that you want to iterate.
4:25
In other words, we wouldn't
wanna put it on the ul element,
4:27
if we did that, well,
let's see what happens.
4:30
If we inspect our HTML structure,
you can see that the unordered list is
4:44
repeated with a single item inside for
every item in the array.
4:49
That's not what we want, so
let's undo these changes.
4:54
So now that I've set up a template,
4:59
I can structure my HTML around this
template variable however I'd like.
5:02
And that structure will be used for
each item in the array.
5:06
For example,
let's change the actual color of the text.
5:10
We can do that by using the v-bind
directive with a modifier called style.
5:14
This allows us to access and
5:20
change style attributes,
sort of like writing in-line CSS.
5:22
I'll use v-bind to set the CSS style
5:26
attribute to the colors
listed in our array.
5:29
The style modifier takes in object, and
then I'll say color, set color to color.
5:32
The first property here refers to
the style attribute called color
5:40
on this particular HTML element.
5:44
The second value refers
to the item in our list.
5:47
So again, I could change this to anything
as long as it matches the alias we've
5:53
chosen to represent
each item in our array.
5:57
So I will change it to
item to demonstrate.
6:00
So we're saying, get the color
attribute of this element and
6:09
change it to whatever
the value of item is.
6:12
So we'll set the color to the word red or
orange or yellow and so on.
6:16
So let's refresh the preview, and
you can see that by the magic of view,
6:22
we're looping through each
item in our array, and
6:27
setting the style property
to the correct color.
6:30
The v-for directive accepts
an optional index variable,
6:33
which will give me access to
the index of each item in the list.
6:37
To add the second option,
I can put both arguments in parentheses.
6:41
Like so, now we have access to
index as the template variable, so
6:52
I can display the index
of the item as well.
6:56
And there you go.
7:12
Handy, yes?
7:13
Without the help of view,
7:14
we'd need to repeat each list
item seven times in our HTML.
7:16
Manually set each list item
to the correct color, and
7:21
change the CSS color attribute
of each element as well.
7:24
You need to sign up for Treehouse in order to download course files.
Sign up