Introduction
Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. In this one, I am covering how to use loops to render content.
Directive v-for
Displaying lists is quite common when building web applications. The problem with it is that most often we don’t know ahead of time how many items there are. And even if we did, repeating all that content manually would be crazy. That is why Vue has the v-for directive. You add it to the element, give it an array of items, and it will render content inside of it for each array element.
v-for example
For example, let’s display a list of people with their first name, last name, and dob. Therefore, we need that list in the application data.
{
data() {
return {
people: [
{
id: 1,
firstName: "John",
lastName: "Doe",
dob: "01-01-1980"
},
{
id: 1,
firstName: "Johny",
lastName: "Doe",
dob: "01-01-1980"
},
{
id: 1,
firstName: "James",
lastName: "Doe",
dob: "01-01-1980"
}
]
}
},
methods: {}
}