v-for with v-if precedence in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to correctly loop over items using v-for.

Vue

<ul>
  <li [1]="item in items">{{ item }}</li>
</ul>

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

Av-for

Bv-if

Cv-bind

Dv-show

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-if instead of v-for for looping.

Using v-bind which is for binding attributes.

Using v-show which controls visibility but does not loop.

The v-for directive is used to loop over arrays in Vue templates.

2fill in blank

medium

Complete the code to conditionally show list items only if item.active is true, using v-if.

Vue

<ul>
  <li v-for="item in items" [1]="item.active">{{ item.name }}</li>
</ul>

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

Av-for

Bv-bind

Cv-if

Dv-show

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-for instead of v-if for condition.

Using v-show which only toggles visibility but keeps elements in DOM.

Using v-bind which is for attribute binding.

The v-if directive conditionally renders elements based on the expression.

3fill in blank

hard

Fix the error in the code by placing v-if with correct precedence to filter items inside the loop.

Vue

<ul>
  <li [1]="item.active" v-for="item in items">{{ item.name }}</li>
</ul>

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

Av-for

Bv-if

Cv-bind

Dv-show

Attempts:

3 left

💡 Hint

Common Mistakes

Placing v-if before v-for causing unexpected behavior.

Using v-show instead of v-if for filtering.

Omitting v-if and filtering outside the loop.

When using v-for and v-if on the same element, v-for should come first and v-if after to ensure correct filtering.

4fill in blank

hard

Fill both blanks to correctly loop over items and conditionally render only active items.

Vue

<ul>
  <li [1]="item in items" [2]="item.active">{{ item.name }}</li>
</ul>

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

Av-for

Bv-show

Cv-if

Dv-bind

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-show instead of v-if for filtering.

Reversing the order of v-for and v-if.

Using v-bind which is for attribute binding.

Use v-for to loop and v-if to conditionally render active items inside the loop.

5fill in blank

hard

Fill all three blanks to create a list that loops over items, shows only active items, and binds a unique key.

Vue

<ul>
  <li [1]="item in items" [2]="item.active" [3]="item.id">{{ item.name }}</li>
</ul>

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

Av-for

Bv-if

C:key

Dv-show

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the key binding causing rendering issues.

Using v-show instead of v-if for filtering.

Placing directives in wrong order.

Use v-for to loop, v-if to filter active items, and :key to bind a unique key for Vue's rendering optimization.