v-else and v-else-if in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Vue template render?

Given the following Vue template snippet, what will be rendered if status is 'loading'?

<template>
  <div>
    <p v-if="status === 'success'">Success!</p>
    <p v-else-if="status === 'loading'">Loading...</p>
    <p v-else>Error occurred</p>
  </div>
</template>

A Success!

B Nothing is rendered

C Error occurred

D Loading...

💡 Hint

Check which condition matches the status value.

The v-if checks if status is 'success', which is false. Then v-else-if checks if status is 'loading', which is true, so it renders 'Loading...'.

📝 Syntax

intermediate

Which option is a valid use of v-else in Vue?

Choose the correct Vue template snippet that uses v-else properly.

A

<p v-if="show">Shown</p>
<p v-else>Hidden</p>

B

<p v-else>Hidden</p>
<p v-if="show">Shown</p>

C

<p v-if="show">Shown</p>
<p v-else v-if="!show">Hidden</p>

D

<p v-if="show">Shown</p>
<p v-else="true">Hidden</p>

💡 Hint

v-else must immediately follow a v-if or v-else-if element.

Option A correctly places v-else immediately after v-if. Option A reverses the order, which is invalid. Option A mixes v-else and v-if on the same element, which is invalid. Option A uses an invalid attribute value for v-else.

🔧 Debug

advanced

Why does this Vue template cause a compilation error?

Examine the Vue template below and identify the cause of the error.

<template>
  <div>
    <p v-if="isActive">Active</p>
    <span>Not active</span>
    <p v-else>Inactive</p>
  </div>
</template>

A The <code>v-else</code> must be immediately after the <code>v-if</code> element without any other elements in between.

B The <code>v-else</code> directive cannot be used on a <code>p</code> element.

C The <code>v-if</code> directive is missing a closing tag.

D The <code>v-else</code> must have a condition like <code>v-else-if</code>.

💡 Hint

Check the placement of v-else relative to v-if.

Vue requires v-else to be immediately after the v-if or v-else-if element. Here, a span is between them, causing a compilation error.

❓ state_output

advanced

What is the rendered output when count is 0?

Consider this Vue template and data:

<template>
  <div>
    <p v-if="count > 0">Positive</p>
    <p v-else-if="count === 0">Zero</p>
    <p v-else>Negative</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

A Positive

B Zero

C Negative

D No output

💡 Hint

Check the conditions in order and see which matches count.

count is 0, so count > 0 is false, count === 0 is true, so 'Zero' is rendered.

🧠 Conceptual

expert

Why must v-else not have a condition?

In Vue, v-else cannot have a condition like v-if or v-else-if. Why is this restriction important?

A Because <code>v-else</code> elements are always hidden and never rendered.

B Because Vue does not support multiple conditions on the same element.

C Because <code>v-else</code> is a fallback that automatically applies when previous conditions fail, adding a condition would break this logic.

D Because <code>v-else</code> must be used only inside <code>v-for</code> loops.

💡 Hint

Think about the purpose of v-else as a fallback.

v-else is designed to show content only if all previous v-if and v-else-if conditions fail. Adding a condition would contradict its role as a fallback.