List Rendering with v-for

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