v-for for list rendering in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to render a list of items using v-for.

Vue

<ul>
  <li v-for="item in [1]" :key="item.id">{{ item.name }}</li>
</ul>

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

Aitems

Blist

Cdata

Delements

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that does not exist in the component data.

Forgetting to add a unique key with :key.

The v-for directive loops over the array named items to render each item.

2fill in blank

medium

Complete the code to include the index when rendering the list with v-for.

Vue

<ul>
  <li v-for="(item, [1]) in items" :key="item.id">{{ index + 1 }}. {{ item.name }}</li>
</ul>

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

Aidx

Bindex

Ci

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name not declared in the v-for syntax.

Forgetting parentheses around both variables.

The second variable in v-for is the index, commonly named index.

3fill in blank

hard

Fix the error in the v-for syntax to correctly render the list.

Vue

<ul>
  <li v-for="item [1] items" :key="item.id">{{ item.name }}</li>
</ul>

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

Aon

Bof

Cin

Dat

Attempts:

3 left

💡 Hint

Common Mistakes

Using of instead of in in v-for.

Missing the keyword entirely.

The correct syntax for v-for uses in to loop over an array.

4fill in blank

hard

Fill both blanks to render a list of users with their index and unique key.

Vue

<ul>
  <li v-for="(user, [1]) in [2]" :key="user.id">{{ index + 1 }}. {{ user.name }}</li>
</ul>

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

Aindex

Bi

Cusers

Ditems

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the index and array names.

Using a variable name not declared in the component.

The index variable is index and the array is users.

5fill in blank

hard

Fill all three blanks to render a list of products showing their uppercase names and filtering only available ones.

Vue

<ul>
  <li v-for="(product, [1]) in products.filter(p => p.available)" :key="[2]">{{ product.[3] }}</li>
</ul>

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

Aindex

Bproduct.id

Cname.toUpperCase()

Di

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-unique key or missing the key.

Not calling the uppercase function correctly.

Using wrong variable names.

The index variable is i, the key is product.id, and the displayed name is the uppercase version using name.toUpperCase().