v-if directive behavior in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is rendered with v-if and v-else?

Consider this Vue template snippet:

<template>
  <div>
    <p v-if="showMessage">Hello!</p>
    <p v-else>Goodbye!</p>
  </div>
</template>

If the component's showMessage data property is false, what will be shown in the browser?

A The text 'Hello!' is shown.

B The text 'Goodbye!' is shown.

C Both 'Hello!' and 'Goodbye!' are shown.

D Nothing is shown because v-if is false.

💡 Hint

Remember that v-else shows content only when v-if is false.

The v-if directive shows the element only if the condition is true. When showMessage is false, the v-else block runs, showing 'Goodbye!'.

❓ state_output

intermediate

How many paragraphs render with multiple v-if?

Given this Vue template:

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

If count is 0, how many <p> elements will be rendered?

A Three paragraphs: 'Positive', 'Negative', and 'Zero'.

B No paragraphs are rendered.

C Two paragraphs: 'Positive' and 'Zero'.

D One paragraph with text 'Zero'.

💡 Hint

Each v-if is independent here.

Each v-if is separate. Only the condition count === 0 is true, so only the 'Zero' paragraph renders.

📝 Syntax

advanced

Which v-if usage causes a syntax error?

Which of these Vue template snippets will cause a syntax error when using v-if?

A &lt;p v-if=isVisible&gt;Visible&lt;/p&gt;

B &lt;p v-if="isVisible &amp;&amp; !isHidden"&gt;Visible&lt;/p&gt;

C &lt;p v-if="isVisible"&gt;Visible&lt;/p&gt;

D &lt;p v-if="isVisible ? true : false"&gt;Visible&lt;/p&gt;

💡 Hint

Check how attribute values are quoted in HTML.

In HTML, attribute values must be quoted. Option A misses quotes around isVisible, causing a syntax error.

🔧 Debug

advanced

Why does v-if not update when data changes?

A Vue component has this template:

<template>
  <div>
    <p v-if="show">Shown</p>
  </div>
</template>

And this script:

const show = false
setTimeout(() => {
  show = true
}, 1000)

Why does the paragraph not appear after 1 second?

A Because setTimeout cannot update Vue data properties.

B Because v-if only works on mounted elements, not dynamic changes.

C Because <code>show</code> is not reactive; it should be a ref or reactive property.

D Because the template syntax is incorrect; v-if needs a method call.

💡 Hint

Vue tracks reactive data to update the DOM.

Variables must be reactive (like refs) for Vue to detect changes and update the DOM. A plain variable show is not reactive.

🧠 Conceptual

expert

What happens when v-if and v-for are used on the same element?

Consider this Vue template:

<template>
  <ul>
    <li v-for="item in items" v-if="item.visible" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

What is the behavior of this code?

A v-if is evaluated for each item after v-for creates the list, so only visible items render.

B v-if is evaluated once before v-for, so the entire list is either shown or hidden.

C v-for is ignored because v-if takes precedence on the same element.

D This causes a runtime error because v-if and v-for cannot be on the same element.

💡 Hint

Think about the order Vue processes directives on the same element.

Vue processes v-for first, creating a list of elements. Then v-if runs on each element to decide if it should render. So only items with item.visible true appear.

Practice

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

easy

A. It conditionally renders an element based on a boolean expression.

B. It always shows the element but changes its color.

C. It loops through a list and renders elements.

D. It binds a click event to an element.

Solution

1. Step 1: Understand the purpose of v-if

   v-if controls whether an element is added or removed from the page based on a condition.

2. Step 2: Compare options

   Only It conditionally renders an element based on a boolean expression. describes conditional rendering. Others describe unrelated Vue features.

3. Final Answer:

   It conditionally renders an element based on a boolean expression. -> Option A

4. Quick Check:

   v-if controls rendering = C [OK]

Hint: v-if adds/removes elements based on true/false [OK]

Common Mistakes:

• Confusing v-if with v-show which only toggles visibility
• Thinking v-if changes styles instead of rendering
• Mixing v-if with event handling directives

2. Which of the following is the correct syntax to use v-if in a Vue template?

easy

A. Content

B. Content

C. Content

D. Content

Solution

1. Step 1: Recall Vue directive syntax

   Vue directives use the format v-if="expression" inside the tag.

2. Step 2: Check each option

   Only
   Content uses the correct attribute binding syntax with quotes and equals sign.

3. Final Answer:

   <div v-if="isVisible">Content</div> -> Option B

4. Quick Check:

   Correct directive syntax = B [OK]

Hint: v-if uses = and quotes for condition expression [OK]

Common Mistakes:

• Using colon instead of equals sign
• Omitting the condition expression
• Using parentheses instead of quotes

3. Given this Vue template snippet:

<template>
  <div>
    <p v-if="showText">Hello World</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const showText = ref(false)
setTimeout(() => { showText.value = true }, 1000)
</script>

What will be the rendered output immediately after the page loads?

medium

A. The paragraph is rendered but hidden with CSS.

B. The paragraph with 'Hello World' is visible.

C. The paragraph is not rendered in the DOM.

D. There will be a syntax error.

Solution

1. Step 1: Check initial value of showText

   It is set to false initially, so v-if="showText" is false.

2. Step 2: Understand v-if behavior on false

   When false, the element is not rendered in the DOM at all.

3. Final Answer:

   The paragraph is not rendered in the DOM. -> Option C

4. Quick Check:

   v-if false means no element in DOM = A [OK]

Hint: v-if false removes element from DOM immediately [OK]

Common Mistakes:

• Confusing v-if with v-show which hides but keeps element
• Assuming element is present but invisible
• Expecting syntax errors from valid code

4. Identify the error in this Vue template:

<template>
  <div v-if="isVisible">Visible Content</div>
  <div v-if>Always Visible</div>
</template>

<script setup>
const isVisible = true
</script>

medium

A. There is no error; the code is valid.

B. The first v-if should be v-show.

C. The variable isVisible is not reactive.

D. The second v-if is missing a condition expression.

Solution

1. Step 1: Check usage of v-if directives

   The first v-if has a proper condition isVisible. The second v-if has no condition.

2. Step 2: Understand v-if syntax requirements

   v-if must have a condition expression. Missing it causes a syntax error.

3. Final Answer:

   The second v-if is missing a condition expression. -> Option D

4. Quick Check:

   v-if requires condition = D [OK]

Hint: v-if always needs a condition expression [OK]

Common Mistakes:

• Thinking v-if can be used without a condition
• Confusing v-if with v-show which can be used without expression
• Assuming non-reactive variables cause syntax errors

5. You want to conditionally render a list of items only if the list is not empty using v-if. Which of these is the best way to write the condition?

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

<!-- Conditional rendering here -->

hard

A. ...

B. ...

C. ...

D. ...

Solution

1. Step 1: Understand the goal

   You want to render the list only if it has one or more items.

2. Step 2: Evaluate each condition

   ...
   checks if items.length > 0, which means the list is not empty.
   ...
   only checks if items exists, which may be true even if empty.
   ...
   checks for null but not empty.
   ...
   checks if undefined, which is incorrect.

3. Final Answer:

   <ul v-if="items.length > 0">...</ul> -> Option A

4. Quick Check:

   Check list length for non-empty = A [OK]

Hint: Use items.length > 0 to check non-empty arrays [OK]

Common Mistakes:

• Checking only if array exists, ignoring empty arrays
• Using undefined or null checks incorrectly
• Not using a proper condition for v-if