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.