v-for renders a list of items in vue.js, it is like using forEach in React.js, or using .map in ruby.
in the below code, that is how we type it.
v-for="item in items" “item in items” accepts each individual part as an item in an array which we called here items.
So, as an example
items= [orange, strawberry, mango, kiwi, apple], each individual here is item.
Let’s use v-for in real example, in my pages folder , I have index.vue file , and inside this LargeCardDisplay component, and I’m using v-for inside of this component. v-for will create a <LargeCardDisplay /> for each item of LargeCardInfo,
We are creating one <LargeCardDisplay / > component and inside components folder, and v-for make this component more with number of each individual inside the array which is here largeCardInfo.
LargeCardInfo is just an array of objects. furtermore, we are sending each <LargeCardDisplay /> component to cardsSection object, which here is basically each item of LargeCardInfo array.
Here is important that v-for will create an < LargeCardDisplay /> component for each individual object inside the array that we have given to v-for, here is largeCardInfo is our big array. if we have 2 objects in the array that means that we have two <LargeCardDisplay /> component, if we have 3, v-for will make three <LargeCardDisplay /> component.
Resources
