v-for with index in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to loop over items and display each item.

Vue

<li v-for="(item, [1]) in items">{{ item }}</li>

Drag options to blanks, or click blank then click option'

Aindex

Bkey

Ci

Didx

Attempts:

3 left

💡 Hint

Common Mistakes

Using only one variable without parentheses when you want the index.

Using a variable name that is not descriptive.

The second variable in v-for is commonly named index to represent the current loop index.

2fill in blank

medium

Complete the code to display the index before each item in the list.

Vue

<li v-for="(item, [1]) in items">{{ [1] + 1 }}. {{ item }}</li>

Drag options to blanks, or click blank then click option'

Ai

Bkey

Cindex

Didx

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong variable name for the index.

Not adding 1 to start counting from 1.

The index variable is used to show the position of each item. Adding 1 makes it start from 1 instead of 0.

3fill in blank

hard

Fix the error in the code to correctly use v-for with index.

Vue

<li v-for="(item, [1]) in items">{{ item }} - {{ [1] }}</li>

Drag options to blanks, or click blank then click option'

Aindex

B(idx)

C(index)

Didx

Attempts:

3 left

💡 Hint

Common Mistakes

Not using parentheses around multiple variables.

Using a comma outside parentheses.

When using multiple variables in v-for, they must be wrapped in parentheses.

4fill in blank

hard

Fill both blanks to correctly bind a unique key using the index in v-for.

Vue

<li v-for="(item, [1]) in items" :key="[2]">{{ item }}</li>

Drag options to blanks, or click blank then click option'

Aindex

Bitem

Ditem.id

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names for the index and key.

Using the item itself as the key without a unique identifier.

The index variable is used in both the loop and as the unique key for each item.

5fill in blank

hard

Fill all three blanks to correctly display the index, item, and bind a unique key.

Vue

<li v-for="([1], [2]) in items" :key="[3]">{{ [2] + 1 }}. {{ [1] }}</li>

Drag options to blanks, or click blank then click option'

Aitem

Bindex

Ditem.id

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the order of item and index.

Using item.id as key when items don't have an id.

The loop uses (item, index), the key uses index, and the display shows index + 1 and the item.