v-for with index in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ query_result

intermediate

Output of v-for with index in Vue

Consider the following Vue template snippet:

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

If items is ["apple", "banana", "cherry"], what will be the rendered list items?

Vue

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

A <li>0 - apple</li><li>1 - banana</li><li>2 - cherry</li>

B <li>1 - apple</li><li>2 - banana</li><li>3 - cherry</li>

C <li>apple - 0</li><li>banana - 1</li><li>cherry - 2</li>

D <li>apple</li><li>banana</li><li>cherry</li>

💡 Hint

Remember that index starts at 0 in v-for.

The v-for directive provides the current index starting at 0. So the output shows the index followed by the item.

📝 Syntax

intermediate

Correct syntax for v-for with index

Which of the following is the correct syntax to use v-for with both item and index in Vue?

A v-for="items as item, index"

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

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

D v-for="item in items, index"

💡 Hint

Check the parentheses and order of variables.

The correct syntax uses parentheses around item, index followed by in items.

❓ optimization

advanced

Best key usage with v-for and index

Given a list of items that may change order or content, which key binding is best to avoid rendering bugs?

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

A :key="Math.random()"

B :key="index"

C :key="item"

D :key="item.id"

💡 Hint

Keys should uniquely identify items and remain stable.

Using a unique property like item.id is best. Using index can cause bugs if items reorder. Random keys cause unnecessary re-renders.

🔧 Debug

advanced

Why does this v-for with index cause a warning?

Consider this code:

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

Vue shows a warning about missing key. Which option fixes it correctly?

Vue

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

A Add :key="item" to the <p>

B Add :key="index" to the <div>

C Add :key="index" to the <p>

D No need to add key, just ignore the warning

💡 Hint

Keys must be on the element with v-for.

The key must be on the element that has the v-for directive, here the div. Adding it to p does not fix the warning.

🧠 Conceptual

expert

Effect of using index as key in dynamic lists

What is the main problem when using the index as the key in a v-for loop for a list that can have items inserted or removed?

A Vue may reuse DOM elements incorrectly, causing UI bugs

B Vue will throw a runtime error and stop rendering

C Vue will ignore the key and render items without keys

D Vue will duplicate items in the list

💡 Hint

Think about how keys help Vue track elements.

Using index as key can cause Vue to reuse DOM elements wrongly when list items change order or are added/removed, leading to UI bugs like wrong data shown.

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