Why conditional rendering matters in Vue - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to conditionally show the message only if isVisible is true.

Vue

<template>
  <div>
    <p v-if="[1]">Hello, Vue!</p>
  </div>
</template>

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

AisVisible

BshowMessage

Cvisible

Ddisplay

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that is not defined in the component.

Forgetting to use the correct variable controlling visibility.

The v-if directive in Vue shows the element only when the condition is true. Here, isVisible controls the display.

2fill in blank

medium

Complete the code to toggle the visibility state when the button is clicked.

Vue

<script setup>
import { ref } from 'vue'
const isVisible = ref(false)

function toggle() {
  isVisible.value = [1]
}
</script>

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

Atrue

BisVisible

Cfalse

D!isVisible.value

Attempts:

3 left

💡 Hint

Common Mistakes

Assigning a fixed value like true or false instead of toggling.

Using isVisible without .value in the ref.

Using !isVisible.value flips the boolean value, toggling visibility on each click.

3fill in blank

hard

Fix the error in the template to correctly bind the click event to the toggle function.

Vue

<template>
  <button [1]="toggle">Toggle Message</button>
  <p v-if="isVisible">Now you see me!</p>
</template>

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

A@click

Bv-on:click.prevent

Cv-bind:click

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-bind:click which is incorrect for events.

Omitting the event binding syntax.

In Vue, @click is shorthand for v-on:click and correctly binds the click event.

4fill in blank

hard

Fill both blanks to create a computed property that returns a message based on isVisible.

Vue

<script setup>
import { computed, ref } from 'vue'
const isVisible = ref(true)
const message = computed(() => [1] ? 'Visible' : [2])
</script>

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

AisVisible.value

B'Hidden'

CisVisible

D'Invisible'

Attempts:

3 left

💡 Hint

Common Mistakes

Using isVisible without .value.

Using the wrong string for the false case.

The computed property checks isVisible.value and returns 'Visible' or 'Hidden' accordingly.

5fill in blank

hard

Fill all three blanks to create a reactive toggle button with conditional rendering and a dynamic message.

Vue

<template>
  <button [1]="[2]">Toggle</button>
  <p v-if="[3]">The message is visible.</p>
</template>

<script setup>
import { ref } from 'vue'
const visible = ref(false)
function toggle() {
  visible.value = !visible.value
}
</script>

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

A@click

Btoggle

Cvisible

DisVisible

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong event binding syntax.

Referencing a variable not defined in the script.

The button uses @click to call toggle. The paragraph shows only if visible is true.