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.

Practice

1. What does the v-else directive do in Vue?

easy

A. Runs only if the first v-if condition is true

B. Runs when all previous v-if and v-else-if conditions are false

C. Runs independently of any other condition

D. Runs only if the last v-else-if condition is true

Solution

1. Step 1: Understand v-if and v-else-if behavior

   v-if runs if its condition is true; v-else-if runs if the previous v-if or v-else-if was false and its own condition is true.

2. Step 2: Understand v-else behavior

   v-else runs only if all previous v-if and v-else-if conditions are false, acting as a fallback.

3. Final Answer:

   Runs when all previous v-if and v-else-if conditions are false -> Option B

4. Quick Check:

   v-else = fallback [OK]

Hint: Remember: v-else is the fallback after all conditions fail [OK]

Common Mistakes:

• Thinking v-else runs independently
• Confusing v-else with v-else-if
• Assuming v-else requires a condition

2. Which of the following is the correct syntax for using v-else-if in Vue?

easy

A. <div v-else-if="condition">Content</div>

B. <div v-else-if>condition</div>

C. <div v-else-if:condition>Content</div>

D. <div v-else-if(condition)>Content</div>

Solution

1. Step 1: Recall Vue directive syntax

   Vue directives use the format v-directive="expression" to bind conditions or values.

2. Step 2: Check each option's syntax

   <div v-else-if="condition">Content</div> uses v-else-if="condition", which is correct. Options B, C, and D use invalid syntax forms.

3. Final Answer:

   <div v-else-if="condition">Content</div> -> Option A

4. Quick Check:

   Directive syntax = v-else-if="condition" [OK]

Hint: Use quotes for conditions in v-else-if [OK]

Common Mistakes:

• Omitting quotes around condition
• Using parentheses or colons incorrectly
• Writing v-else-if without a condition

3. Given this Vue template snippet:

<div v-if="score >= 90">A</div>
<div v-else-if="score >= 75">B</div>
<div v-else-if="score >= 60">C</div>
<div v-else>F</div>

What will be displayed if score is 80?

medium

A. A

B. C

C. B

D. F

Solution

1. Step 1: Evaluate the first condition score >= 90

   Since 80 is less than 90, this condition is false, so this block does not render.

2. Step 2: Evaluate the second condition score >= 75

   80 is greater than or equal to 75, so this condition is true. Vue renders this block and skips the rest.

3. Final Answer:

   B -> Option C

4. Quick Check:

   80 >= 75 = true, so output is B [OK]

Hint: Check conditions top to bottom; first true runs [OK]

Common Mistakes:

• Choosing the first condition without checking value
• Ignoring order of v-else-if blocks
• Assuming multiple blocks render

4. What is wrong with this Vue template?

<div v-if="isActive">Active</div>
<div v-else-if>Inactive</div>
<div v-else>Unknown</div>

medium

A. The v-else-if directive is missing a condition

B. The v-else directive cannot be used after v-else-if

C. The v-if directive must have a closing tag

D. There should be no v-else after v-if

Solution

1. Step 1: Check v-else-if usage

   v-else-if requires a condition to evaluate. Here, it is used without any condition, which is invalid syntax.

2. Step 2: Verify other directives

   v-else can follow v-else-if, and v-if has proper closing tags, so no issues there.

3. Final Answer:

   The v-else-if directive is missing a condition -> Option A

4. Quick Check:

   v-else-if needs a condition [OK]

Hint: v-else-if always needs a condition in quotes [OK]

Common Mistakes:

• Leaving v-else-if without condition
• Thinking v-else can't follow v-else-if
• Confusing v-if closing tags

5. You want to display a message based on a user's status using Vue directives. The statuses are: 'admin', 'editor', and others. Which template correctly uses v-if, v-else-if, and v-else to show 'Admin Access', 'Editor Access', or 'Guest Access' respectively?

hard

A. <div v-if="status === 'admin'">Admin Access</div>
<div v-else>Editor Access</div>
<div v-else-if="status === 'editor'">Guest Access</div>

B. <div v-if="status === 'admin'">Admin Access</div>
<div v-if="status === 'editor'">Editor Access</div>
<div v-else>Guest Access</div>

C. <div v-if="status === 'admin'">Admin Access</div>
<div v-else-if>Editor Access</div>
<div v-else>Guest Access</div>

D. <div v-if="status === 'admin'">Admin Access</div>
<div v-else-if="status === 'editor'">Editor Access</div>
<div v-else>Guest Access</div>

Solution

1. Step 1: Check the chaining of conditions

   <div v-if="status === 'admin'">Admin Access</div>
   <div v-else-if="status === 'editor'">Editor Access</div>
   <div v-else>Guest Access</div>

   correctly uses v-if, then v-else-if with a condition, then v-else as fallback.

2. Step 2: Verify other options for errors

   <div v-if="status === 'admin'">Admin Access</div>
   <div v-if="status === 'editor'">Editor Access</div>
   <div v-else>Guest Access</div>

   uses two v-if directives, which are independent and can cause multiple blocks to render.

   <div v-if="status === 'admin'">Admin Access</div>
   <div v-else-if>Editor Access</div>
   <div v-else>Guest Access</div>

   uses v-else-if without a condition, which is invalid.

   <div v-if="status === 'admin'">Admin Access</div>
   <div v-else>Editor Access</div>
   <div v-else-if="status === 'editor'">Guest Access</div>

   places v-else before v-else-if, which breaks the chain.

3. Final Answer:

   The template that correctly chains v-if, v-else-if with condition, and v-else -> Option D

4. Quick Check:

   v-if, v-else-if with condition, then v-else [OK]

Hint: Chain conditions: v-if, v-else-if with condition, then v-else [OK]

Common Mistakes:

• Using multiple v-if instead of v-else-if
• Omitting condition in v-else-if
• Placing v-else before v-else-if