v-else and v-else-if in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to show a message only if isLoggedIn is true.

Vue

<template>
  <div>
    <p v-if="[1]">Welcome back!</p>
  </div>
</template>

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

AshowMessage

BhasAccess

CuserActive

DisLoggedIn

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable that is not defined in the component.

Forgetting to use the correct variable name.

The v-if directive checks if isLoggedIn is true to show the message.

2fill in blank

medium

Complete the code to show a message only if isLoggedIn is false using v-else.

Vue

<template>
  <div>
    <p v-if="isLoggedIn">Welcome back!</p>
    <p [1]>Please log in.</p>
  </div>
</template>

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

Av-else

Bv-else-if

Cv-if

Dv-show

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-if instead of v-else for the second element.

Adding a condition inside v-else.

The v-else directive shows the element only if the previous v-if condition is false.

3fill in blank

hard

Fix the error in the code by replacing the incorrect directive with the correct one for an else-if condition.

Vue

<template>
  <div>
    <p v-if="score >= 90">Excellent!</p>
    <p [1]="score >= 75">Good job!</p>
    <p v-else>Keep trying!</p>
  </div>
</template>

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

Av-if

Bv-show

Cv-else-if

Dv-else

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-else with a condition causes an error.

Using v-if instead of v-else-if breaks the chain.

The v-else-if directive is used to check another condition if the first v-if is false.

4fill in blank

hard

Fill both blanks to correctly display messages based on status value.

Vue

<template>
  <div>
    <p v-if="status === 'success'">Success!</p>
    <p [1]="status === 'warning'">Warning!</p>
    <p [2]>Error occurred.</p>
  </div>
</template>

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

Av-else-if

Bv-else

Cv-if

Dv-show

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-if for all conditions instead of chaining with v-else-if and v-else.

Adding a condition to v-else.

Use v-else-if for the second condition and v-else for the fallback message.

5fill in blank

hard

Fill all three blanks to create a chain of conditions checking level and showing messages accordingly.

Vue

<template>
  <div>
    <p v-if="level === 'high'">High level</p>
    <p [1]="level === 'medium'">Medium level</p>
    <p [2] [3]>Low level</p>
  </div>
</template>

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

Av-else-if

Bv-else

Cv-show

Dv-if

Attempts:

3 left

💡 Hint

Common Mistakes

Adding a condition to v-else.

Using v-if instead of v-else-if in the chain.

Use v-else-if for the medium level, v-else for the low level, and no extra directive for the last blank.