View makes it super easy to loop over and render arrays and objects in a template with a directive called before. Take this shopping list app we're working on here, for example. Let's say we want to render a list of shopping list items in an unordered list, something like this. However, we don't really want these items to be hard coded in our template.
Instead, we want to store them as a reactive reference up in the script section. That way we can manipulate them, add to them, remove them, whatever we kind of need for a shopping list app. I'll call our variable items and assign it to a reactive reference. that's an array of all our items.
Now we can use v-for to loop over each of these items in the template below. Awesome. Now it reads exactly the same as it did before, but this time our items are dynamic and are coming from the reactive reference. Now, the syntax here might be a little tricky to remember at first.
But if we break it down, it actually reads quite like a sentence. We'd like an li for each item in our items array. Also know that item here could be named really anything you'd like. It could be foo, or Batman, or anything at all.
But item best represents the individual elements in our array. So that's what we went with. Now, in order for view to be as performant as possible, it takes some shortcuts when rendering lists. Thus, in order to best help Vue know when to re-render what items, it's always recommended to add a special key attribute to all of your loops.
The key attribute should be set to some unique ID per item, such as an ID from a database. This isn't always absolutely necessary for simpler arrays like our items, but it's still a good practice and good for you to see the key in action. Let's change out the structure now of our items so that we can actually give each one their own unique ID. id.
id, we've got to add a colon before key. This is known as attribute binding, and we'll talk about it a little bit more in a later lesson. label. Awesome.
As you can see on the right-hand side, everything is still working great. And now Vue can handle our code with optimal performance without the risk of the loop having issues in the future should we refactor it to be anything more than these simple LIs. js three. I've made a link to it in the description below.
Suffice it to say for now though, just use them whenever possible. Back in the app, since each item is an object, we could even destructure ID and label from it, like so. And then the key would become just plain ID. And this would be just label.
Nice. If we wanted to access the index of each item in the array, we can do that in the v for by putting a parentheses around the first part of the expression, and then separating the item from the index with a comma. And I'll just print it out within the line so that you can see it. Awesome.
Now each list item begins with the index of the item in the array. You might also be tempted to use the index as the key. But this is actually what view does by default anyways, under the hood. And so really, it's the exact same thing as not providing a key at all.
And worse, it gives you the false security that you have provided a key when you actually haven't. So let's change it back. Not only does V four work great for arrays, but it can handle objects too. Let's alter the format of our items to be an object with the object keys being the item ID.
And I'll also prepend each key with item dash, just to make it clear that these are not indexes. Over on the right hand side, you can now see that item dash one, item dash two, and item dash three are printed out where the indexes were printed out before. These are the object keys. And each property in the object has been correctly rendered to the page.
Very nice. While object support is really cool, it's not necessary for our current use case, so let's change the items back to an array now. Let's also remove the index from printing out in the li. One of the best parts about v-for is that it's reactive as well.
If we were to push another item into the items array, Then the loop would automatically update and that item would be included on the page. Likewise, if we were to remove an item from the items array, the page would update then as well. We'll see that very thing in action in a couple of lessons, so stick around.