View makes it super easy to loop over and render arrays and objects in a template with a directive called v4. Take this shopping list app 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 hardcoded in the template like this.
Instead, they should be stored in a data property. Let's call it items. Now we can use v4. to loop over each item, rendering each one to its own li 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 Foo, 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 re-render 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. id. label. Now, let's give the browser a refresh.
And yeah, everything still works. But most importantly, now view 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 li's? js 3.
Link 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 v4.
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. All right.
If we also wanted to access the index of each item in the array, we could also do that with v4. 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 Vue 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 V4 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 prepin each key with item dash, just to make it clear that these are not indexes. We can also update the v4 now to be more accurate. We'll change index to key.
Now, if we give the page a refresh, you'll see that each item's 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 v4 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 View 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.
View makes it super easy to loop over and render arrays and objects in a template with a directive called v4. Take this shopping list app 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 hardcoded in the template like this.
Instead, they should be stored in a data property. Let's call it items. Now we can use v4. to loop over each item, rendering each one to its own li 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 Foo, 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 re-render 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. id. label. Now, let's give the browser a refresh.
And yeah, everything still works. But most importantly, now view 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 li's? js 3.
Link 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 v4.
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. All right.
If we also wanted to access the index of each item in the array, we could also do that with v4. 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 Vue 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 V4 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 prepin each key with item dash, just to make it clear that these are not indexes. We can also update the v4 now to be more accurate. We'll change index to key.
Now, if we give the page a refresh, you'll see that each item's 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 v4 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 View 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.