v-for with index in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does v-for do in Vue?

v-for is a directive in Vue that lets you repeat an element or component for each item in a list or array.

beginner

How do you access the index of the current item in a v-for loop?

You add a second variable after the item in the v-for syntax, like v-for="(item, index) in items". The index holds the current position starting from 0.

beginner

Why is it useful to have the index in a v-for loop?

The index helps you show the position of each item, create unique keys, or perform actions based on the item's order.

beginner

Write a simple v-for example that lists names with their index starting from 1.

<ul>
  <li v-for="(name, i) in names" :key="i">
    {{ i + 1 }}. {{ name }}
  </li>
</ul>

intermediate

What is the role of the :key attribute in a v-for loop?

:key helps Vue track each item uniquely for efficient updates and rendering. Usually, you use the index or a unique id as the key.

In Vue, how do you write a v-for loop to get both item and index?

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

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

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

D v-for="items (item, index)"

The correct syntax is v-for="(item, index) in items" to get both the item and its index.

What does the index variable in v-for="(item, index) in items" represent?

A The value of the item

B The position of the item in the list starting at 0

C The total number of items

D The key of the item

The index is the position of the current item in the list, starting from 0.

Why should you use a :key attribute in a v-for loop?

A To help Vue track elements for efficient updates

B To style the elements

C To add event listeners

D To sort the list

:key helps Vue identify each element uniquely for better rendering performance.

If you want to display the index starting from 1 instead of 0, what should you do inside the template?

A Use {{ index * 1 }}

B Use {{ index - 1 }}

C Use {{ index }} directly

D Use {{ index + 1 }}

Add 1 to the index because it starts at 0 by default.

Which of these is NOT a valid use of the index in a v-for loop?

A Displaying the item number

B Using as a unique key

C Changing the original list order automatically

D Performing conditional rendering based on position

The index does not change the list order automatically; it only shows the position.

Explain how to use v-for with an index in Vue and why it is helpful.

Think about looping through a list and showing the order number.

Describe the importance of the :key attribute when using v-for with an index.

Consider what happens when Vue updates a list of items.