- [Ray] Vue.js provides a directive to allow you
to loop through a series of objects
or a number of arrays.
So right now, I have added a product section to my data,
and I added an array of objects.
The objects themselves look pretty similar
to what we had before except
with some additional fields.
And you'll see that there's three of them right here.
And if we can collapse this by clicking on this right here,
you'll see that the rest of the application
looks exactly the same as it did before.
Our HTML also looks a little bit different.
It's a little bit more complex,
but I've essentially added some Bootstrap classes
to make the app a little more responsive,
and so that it looks really nice,
I separated things into columns and such.
But the code is pretty much the same.
You can see that I'm referencing my image, my name,
and the name, description, price right here,
just like I was before.
So in order to loop through a series of elements,
we need to use the directive called v-for,
just like a for loop in JavaScript.
And then what we do here is create a temporary variable.
So we can say, "item in"
and then the name of the variable that we want to track.
So we'll say, "item in products".
Remember, products is the name
of what's in my data right now.
And I want to loop through all the products,
and then create a temporary variable called "item",
to keep track of each of the products.
And then, for each one of those items,
I can then use the same sort of notation
that I was using before,
but I now have to specify that each one of these
is going to track now the variable called "item",
and then look for an image element.
Same thing here,
as well as down here.
So now that I've done that,
let's go ahead and take a look at our preview,
and you should see a list
of the different items arranged here.
And you could see that if I make this window small,
they're responsive because of all the Bootstrap code
that I have added.
And that's pretty much as simple as it gets
to loop through a number of elements.
There are a lot of other options.
V-for will let you loop through a series
of objects or arrays,
and it's a real convenient way
of going through some elements in Vue.js.