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