Hello everyone and welcome back.
In this lesson we're going to learn how to use the V for directive to render lists of elements in our
web pages.
Let's get started.
Here we are in business in your code and as you can see as always I have created a new age the email
file for this lesson and a new main the J.S. file.
What I've also created the instance that we are going to use as we've said in this lesson we're going
to talk about at least a rendering introducing a new view directive V for directive.
Let's say REST API candies is sending us a list of users that we need to show in our web page.
Let's see if we can do this using view.
So yeah we can define an h1 tag.
Users list.
India in the data model which we need to define.
We can create an array for example.
So users.
So we are.
Alice Bob Batman then Robin and maybe even Superman.
Going back to the HMO file we can now define an unordered list.
And yet inside we can use the least element tag and we can't automatically show it for as many users
as we have in at least using the V for data active.
So V for India in a very similar fashion to what you will do using Python we can do use it in uses and
yeah we can simply use the curly braces plus the value of that specific user.
Let's now open up the Chrome browser which I've already opened here.
So I'm just going to refresh the page and as you can see we now get a list of all the users in our users
array.
Considering that as I said this is very similar to what you will do in Python yet instead of user I
could have specified something like Xa.
OK so going back to Chrome refresh and this you can see the list is still here.
But of course as you surely know most of the time in software development explicit is better than implicit.
So let's go back to using user and David for DirecTV is really cool allowing us to show lists of elements
as well without having to specify anything inside the data object.
So let me show you how you can do this V for and for example let's say that for any reason we need a
list of numbers from 1 to 10.
So number in turn you can just use number like so and maybe we can add another paragraph numbers from
1 to 10.
So let's go back to the browser refresh and it is at least awesome.
Let's make a bit of a more advanced example because most of the times especially when dealing with users
as we've seen in the previous sections about building the rest api is most of the times we would get
more than just the name of the single user.
So either they can define I.D. something like five six seven then of course to name and yet we can pass
Alice in their profession and we can make Alice a developer of course.
Jennifer let's add four more.
One two three four.
So first of all these eight nine 70 and this is going to be of course 71.
So yeah we have
that we have lots more than we can make manager then we have Robin it again maybe be a designer and
then we have Superman of course that's this can be a developer just as well we need to have some commerce
of course.
One
three let's now go back to our HDMI file and considering that I've imported the bootstrap CDM let's
make a bit of a more advanced example so yeah I can define a diva of glass card like so.
And yet another diva of glass cards body endure two paragraphs one and two with name
and profession.
And so similarly to what we've done in the previous example we can use V for once again always with
user in users and we can now simply reference all the different attributes of the users so user dot
name and then yeah this is going to be of course user dot profession.
So let's go back to cruel and let's refresh the page and we have a list of users.
Awesome.
It's important to note that most of the times when using before in a context like this one it's whether
to pass a key attribute to a viewer.
Yes so that it can keep track of all the nodes that it's creating.
And most of the times if you have a feels like idea like we do.
That's a perfect field to pass to key.
So yeah you can do something like this one 10 year bind on key.
Remember the column by end user dot I.D..
And if you now save and go back to the browser let's refresh at least.
As you can see everything is still here but passing key will also make that up much more robust.
That was it for this electorate about police rendering and before in Georgia yes.
In the next one.
We're going to talk about another very important and useful tool computed properties.