Scaling UpLesson 22Free preview

Vue v-for Components

This lesson is part of Vue · All levels

Summary

When a rendered list becomes multiple components, each item needs to be a standalone component instance with its own props. The v-for directive can be attached directly to the component tag, with props dynamically bound from the data item. The key syntax remains necessary for Vue to track each instance steadily.

Key points

The v-for can be attached to the component tag like it is on a regular element.
The props of each instance follow the value of the item on that iteration.
Key attributes are mandatory to keep the instance tracking stable.
The key should be a unique identity, not an index, when the list can change order.
Each instance has a separate internal state from each other.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.