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.