View makes it super easy to loop over and render arrays and objects in a template with a directive called v four. Take this shopping list out for example. Let's say we want to render a list of items in an unordered list. However, we really don't want these items hard coded in the template like this.
Instead, they should be stored in a data property. Let's call it items. Now we can use v four to loop over each item, rendering each one to its own ally in the unordered list. And just like that, we've added items to our shopping list.
Awesome. Now, the syntax 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 anything we'd like. It could be food, Batman, or literally anything you want. However, item best represents each individual element within our array. So this is what we chose to use.
In order for view to be as performant as possible, view takes some shortcuts when rendering lists. Thus, in order to help it know when to rerender what items, it is always recommended to add a special key attribute to your loops. The key attribute should be set to some unique ID per item, such as an ID from a database. This isn't absolutely necessary with simpler arrays like our items, but it's still good practice and good for you to see the key in action.
Let's change out the structure of our items now and give each one of them a unique ID. Now, we'll set the key attribute on the li to item dot ID. And that means we'll have to change out what is printed in the li from item to item dot label. Now, let's give the browser a refresh.
And yeah, everything still works. But most importantly, 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 being anything more than these simple LIs. js three, linked in the description below. Suffice it to say for now though, just use them whenever possible.
Cool. So now just as a quick side tip, I also want to point out that when your arrays have objects as each of their items, as ours does, we can actually destructure that object within the V four. And yeah, that works just the same. This really isn't necessary, though, and really just comes down to personal preference.
So I'll just change it back for now. Alright, if we also wanted to access the index of each item in the array, we could also do that with v four. And now over in the browser, the index prints out with each item. You might also be tempted to use the index as the key.
But this is actually what view does by default under the hood anyways. And so it's really the exact same thing as not providing it at all. And worse, it gives the fault security that you have provided a sufficient key. So let's just change that back.
Not only does v four work great for arrays, but it can also handle objects too. Let's alter the format of our items to be an object with the object keys being the item ID. I will also prepend each key with item dash just to make it clear that these are not indexes. We can also update the v for now to be more accurate.
We'll change index to key. Now, if we give the page a refresh, you'll see that each items label is intact. And what was the index previously is now each of the keys in the items object. While object support is really cool.
It's not necessary for our current use case. So let's just change items back to an array. We can also remove the object key in the template before continuing. One of the best parts about V four is that it's reactive as well.
If we take a look at the console and push some data to our items array, we'll see that it shows up on the page at the same time. Isn't that awesome. We can also remove an item from our array just as easily. And just like that, it's removed from the page.
Think of all the possibilities this opens up for us. We don't have to worry about manipulating the DOM and injecting or removing elements with weird selectors in jQuery. Instead, we can focus on managing data properties with simple array methods. And Vue will take care of how the page is rendered for us.
While it's great to have these items on the list now, we still have a few more of them to pick up before the party starts. In the next episode, we'll take a look at adding new items to our list through the applications UI.