>> Hi there. I'm Christopher.
I'm a Senior Cloud Advocate at Microsoft.
What I want to take a look at in this video is how we
can utilize the v-for statement to be able to loop through data.
Now, one of the things that you'll frequently need to do is to
display information let's say inside of an array.
The way that we'll do that in Vue is by using the v-for directive.
Now, the way that we set up with our v-for is like this.
Let's return back to a little sample application.
You're going to notice that I've got a bit of data here.
We're going to return an array of cruises,
and I want to display all of these cruises.
Let me go right up to here,
and let's actually just do this with the div.
So I'm going to say v-for.
Then, now in here, you indicate what it is that you
want to loop through and give it a variable name.
This behaves very similar to doing like a
for-each or a for-of in JavaScript,
where what you're going to do is identify some variable,
and then it's going to go through your array,
and for every item that it finds in there it will automatically
assign it to be that variable that you've identified.
I'll be able to say cruise in cruises,
so there is our cruises down below,
here's our individual cruise.
Now, this will automatically loop through all of our items.
Now because of the fact that I
had this from earlier, where I'm saying cruise,
we'll be able to use the same exact code that
we had so you'll notice that there's our cruise,
there's our cruise, there's our cruise,
the whole way down.
If I save this,
now you're going to notice again with the magic of
our Live Server is
that it automatically refreshes my display here.
So what we can notice over on
the right side is that our logic is still applying,
so our seats available for the cruise to the moon is true,
our early bird is true,
so it mentions that Book Early Bird.
For our cruise to Mars, no seats available,
so no button, so that's why we
don't get a button after cruise to Mars.
Then for our cruise to the asteroid belt,
what you'll notice is that we've got our seats available is true,
no early bird, so it's just going to
display out that Book Now on the button.
Now one thing that you should always
do whenever you're displaying out
a list using v-for in
Vue is you should always set each item with a key.
Because what this will do is it will help Vue,
in case your array updates,
figure out where it should go into
your HTML to perform those updates.
Now, if you happen to have maybe a set of data from
a database where you have like
a primary key or some other identifier,
then you could just go ahead and use that identifier.
In my case, I don't have that because it's
a hard-coded array here, no IDs.
But fortunately, I can actually find out
where we are in here by grabbing the index.
If I update my code here passing in two parameters,
so rather than just cruise,
I'm going to say cruise and then index.
That index will then start at zero and then go one,
two, three as we go through our list.
So zero for the first item,
one for the second, two for the third, etc.
Like you might expect if you're using a for statement.
Now, let me go ahead and
set up my key and I'm going to use the shortcut.
I can use a v-bind,
but I'm going to use the shortcut.
This is typically the way that it's done.
I'll say key equals,
and then in my case,
it will be that index.
Now, when I save this,
you're not going to notice any changes to the page because
there aren't any updates to apply visually.
But internally, this is going
to help improve performance and it is
a best practice when you're doing loops to
display items inside of Vue.
That is how we can use the v-for in
Vue to display out a list of items on a page.
[MUSIC]