The vue for built in directive can be used to generate a collection of elements from an array of items in the data object in vuejs. In this post I will be looking at some examples that I put together when it comes to using this directive as a way to generate a list.
To use the vue for directive I just need to use the v-for directive inside a child element of a template followed by an item in array syntax where the item is a name that will be used to refer to the current item in the array in the template, and the array is the name of the array in the data object.
If you are still a little confused maybe it would be best to just look at a code example.
All additional examples in this post use html that is the same as this the only difference is the filename.
It is possible for there to be a second argument to work with aside from the alias of the current array element. This second argument is the current array element index value. As you might expect the index values are zero relative just like that of certain array prototype methods like forEach.
If I have an array for each object in an array it is possible to nest the use of of the vue for directive.