v-for with index in Vue - Step-by-Step Execution

Concept Flow - v-for with index

Start with array

↓

v-for loop begins

↓

For each item in array

↓

Assign index to variable

↓

Render item and index

↓

Move to next item

↓

End if done

The v-for directive loops over an array, assigning each item and its index to variables, then renders them one by one.

Execution Sample

Vue

<ul>
  <li v-for="(item, index) in items" :key="index">
    {{ index }} - {{ item }}
  </li>
</ul>

This code loops over 'items' array and displays each item with its index in a list.

Execution Table

Step	Index	Item	Action	Rendered Output
1	0	"Apple"	Render first item with index 0	<li>0 - Apple</li>
2	1	"Banana"	Render second item with index 1	<li>1 - Banana</li>
3	2	"Cherry"	Render third item with index 2	<li>2 - Cherry</li>
4	-	-	No more items, loop ends	Loop ends

💡 Loop ends after all items in 'items' array are rendered.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
index	-	0	1	2	-
item	-	"Apple"	"Banana"	"Cherry"	-

Key Moments - 3 Insights

Why does the index start at 0 instead of 1?

In the execution_table rows 1-3, index starts at 0 because arrays in JavaScript and Vue are zero-based, meaning counting begins from zero.

What happens if we omit the index variable in v-for?

If index is omitted, you cannot display or use the position of the item in the list, as shown in execution_table where index is used to render output.

Why do we use :key with index in v-for?

The :key helps Vue track each item uniquely for efficient updates. Using index as key is shown in the code sample and is important for rendering performance.

Visual Quiz - 3 Questions

Look at the execution_table, what is the item at step 2?

A "Apple"

B "Banana"

C "Cherry"

D undefined

💡 Hint

Check the 'Item' column in execution_table row with Step '2'.

At which step does the loop end according to the execution_table?

A Step 3

B Step 2

C Step 4

D Step 1

💡 Hint

Look at the 'Action' column where it says 'No more items, loop ends'.

If the items array had 4 elements, how many steps would the execution_table show?

A 5 steps

B 4 steps

C 3 steps

D 6 steps

💡 Hint

Notice the last step is for loop ending after all items are rendered.

Concept Snapshot

v-for with index syntax:
<li v-for="(item, index) in items" :key="index">{{ index }} - {{ item }}</li>

Loops over array 'items', assigns each element to 'item' and its position to 'index'.
Index starts at 0.
Use :key for efficient rendering.
Displays both index and item in the template.

Full Transcript

The v-for directive in Vue loops over an array. For each element, it assigns the element to a variable and its position to an index variable. The index starts at zero because arrays are zero-based. The loop renders each item with its index. The :key attribute helps Vue track each item uniquely for efficient updates. The loop ends after all items are rendered.

Practice

1. What does the v-for directive do in Vue when used with a list?

easy

A. Creates a single element regardless of list size

B. Deletes items from the list

C. Sorts the list items alphabetically

D. Repeats an element for each item in the list

Solution

1. Step 1: Understand the purpose of v-for

   The v-for directive is designed to repeat an element for each item in a list or array.

2. Step 2: Compare options with this behavior

   Only Repeats an element for each item in the list describes repeating elements for each list item, which matches v-for usage.

3. Final Answer:

   Repeats an element for each item in the list -> Option D

4. Quick Check:

   v-for repeats elements [OK]

Hint: Remember: v-for loops over lists to repeat elements [OK]

Common Mistakes:

• Thinking v-for deletes or sorts items
• Confusing v-for with conditional rendering
• Assuming v-for creates only one element

2. Which of the following is the correct syntax to use v-for with an index in Vue?

easy

A. v-for="(item, index) in items"

B. v-for="item, index in items"

C. v-for="item in items, index"

D. v-for="items as item, index"

Solution

1. Step 1: Recall correct v-for syntax with index

   The correct syntax is v-for="(item, index) in items", where the item and index are inside parentheses.

2. Step 2: Check each option

   Only v-for="(item, index) in items" uses parentheses correctly and the right order: item then index.

3. Final Answer:

   v-for="(item, index) in items" -> Option A

4. Quick Check:

   Parentheses around item and index = v-for="(item, index) in items" [OK]

Hint: Use parentheses around item and index in v-for [OK]

Common Mistakes:

• Omitting parentheses around item and index
• Placing index after the list instead of inside parentheses
• Using commas outside parentheses

3. Given the Vue template snippet:

<ul>
  <li v-for="(fruit, i) in ['apple', 'banana', 'cherry']" :key="i">{{ i }} - {{ fruit }}</li>
</ul>

What will be the rendered list items?

medium

A. 1 - apple2 - banana3 - cherry

B. 0 - apple1 - banana2 - cherry

C. apple - 0banana - 1cherry - 2

D. applebananacherry

Solution

1. Step 1: Understand the loop and index

   The loop goes over the array ['apple', 'banana', 'cherry'] with index i starting at 0.

2. Step 2: Check the output format

   Each list item shows "{{ i }} - {{ fruit }}", so index then fruit name separated by a dash.

3. Final Answer:

   0 - apple
   1 - banana
   2 - cherry -> Option B

4. Quick Check:

   Index starts at 0, format is 'index - fruit' [OK]

Hint: Index in v-for starts at 0 by default [OK]

Common Mistakes:

• Assuming index starts at 1
• Swapping index and item in output
• Ignoring the :key binding

4. Identify the error in this Vue snippet:

<div v-for="item, index in items" :key="index">
  {{ index }}: {{ item }}
</div>

medium

A. Missing parentheses around item and index

B. Incorrect use of :key attribute

C. Using index instead of item in interpolation

D. v-for cannot be used on div elements

Solution

1. Step 1: Check v-for syntax

   The syntax for v-for with index requires parentheses: v-for="(item, index) in items".

2. Step 2: Analyze the given code

   The code uses v-for="item, index in items" without parentheses, which is invalid.

3. Final Answer:

   Missing parentheses around item and index -> Option A

4. Quick Check:

   Parentheses required for multiple variables in v-for [OK]

Hint: Always wrap item and index in parentheses in v-for [OK]

Common Mistakes:

• Omitting parentheses causes syntax error
• Misplacing :key attribute
• Thinking v-for can't be on div

5. You have a list of users with IDs and names:

users = [
  { id: 101, name: 'Alice' },
  { id: 102, name: 'Bob' },
  { id: 103, name: 'Carol' }
]

Which Vue template correctly uses v-for with index and sets a unique :key for each user?

hard

A. <div v-for="(user, i) in users" :key="i">{{ user.name }}</div>

B. <div v-for="user in users" :key="user.id">{{ user.name }}</div>

C. <div v-for="(user, index) in users" :key="user.id">{{ index }} - {{ user.name }}</div>

D. <div v-for="(user, index) in users" :key="index">{{ user.id }}: {{ user.name }}</div>

Solution

1. Step 1: Identify correct v-for syntax with index

   Options A, B, and D use (user, index) syntax correctly; C does not use index.

2. Step 2: Check for unique :key usage

   Keys should be unique and stable. Using user.id is best. <div v-for="(user, index) in users" :key="user.id">{{ index }} - {{ user.name }}</div> uses :key="user.id" with index, which is correct.

3. Step 3: Verify output format

   <div v-for="(user, index) in users" :key="user.id">{{ index }} - {{ user.name }}</div> shows index and user name, which matches the question requirement.

4. Final Answer:

   <div v-for="(user, index) in users" :key="user.id">{{ index }} - {{ user.name }}</div> -> Option C

5. Quick Check:

   Use (item, index) with unique :key from item [OK]

Hint: Use item ID for :key, index for display only [OK]

Common Mistakes:

• Using index as :key causing update issues
• Not using parentheses for item and index
• Ignoring unique keys requirement