1---
2title: Always Pass v-for Data to Components via Props
3impact: MEDIUM
4impactDescription: Components have isolated scope - v-for iteration data is not automatically available inside child components
5type: gotcha
6tags: [vue3, v-for, components, props, list-rendering]
7---
8 
9# Always Pass v-for Data to Components via Props
10 
11**Impact: MEDIUM** - Vue components have isolated scope by design. When using `v-for` to render components, the iteration variable (e.g., `item`) is NOT automatically available inside the child component. You must explicitly pass the data through props.
12 
13This isolation is intentional - it keeps components reusable and their data dependencies explicit. Forgetting to pass props results in `undefined` data or errors about missing properties.
14 
15## Task Checklist
16 
17- [ ] Always bind iteration data to component props explicitly
18- [ ] Pass both the item and index if the component needs them
19- [ ] Always include a unique `:key` when rendering components with v-for
20- [ ] Define corresponding props in the child component to receive the data
21 
22**Incorrect:**
23```html
24<!-- WRONG: Component cannot access 'todo' - it's not in scope -->
25<TodoItem v-for="todo in todos" :key="todo.id" />
26 
27<!-- Inside TodoItem.vue: this.todo or todo is undefined! -->
28```
29 
30```html
31<!-- WRONG: Key provided but no data passed -->
32<UserCard
33  v-for="user in users"
34  :key="user.id"
35/>
36<!-- UserCard has no user data to display -->
37```
38 
39**Correct:**
40```html
41<!-- CORRECT: Explicitly pass the item as a prop -->
42<TodoItem
43  v-for="todo in todos"
44  :key="todo.id"
45  :todo="todo"
46/>
47```
48 
49```html
50<!-- CORRECT: Pass multiple pieces of data -->
51<UserCard
52  v-for="(user, index) in users"
53  :key="user.id"
54  :user="user"
55  :index="index"
56  :is-first="index === 0"
57/>
58```
59 
60```vue
61<!-- Child component: UserCard.vue -->
62<script setup>
63defineProps({
64  user: {
65    type: Object,
66    required: true
67  },
68  index: {
69    type: Number,
70    required: true
71  },
72  isFirst: {
73    type: Boolean,
74    default: false
75  }
76})
77</script>
78 
79<template>
80  <div class="user-card">
81    <span>{{ index + 1 }}. {{ user.name }}</span>
82    <span v-if="isFirst">(First User)</span>
83  </div>
84</template>
85```
86 
87## Why Explicit Props?
88 
891. **Clear data flow**: Makes dependencies explicit and traceable
902. **Reusability**: Components work anywhere, not just inside specific v-for loops
913. **Type safety**: Props can be validated with type and required checks
924. **Maintainability**: Easier to understand what data a component needs
93 
94## Reference
95- [Vue.js List Rendering - v-for with Components](https://vuejs.org/guide/essentials/list.html#v-for-with-a-component)
96