v-if directive behavior in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to conditionally render the paragraph only if show is true.

Vue

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

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

Ashow

Bvisible

Cdisplay

DisShown

Attempts:

3 left

💡 Hint

Common Mistakes

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

Forgetting to use quotes around the variable in the directive.

The v-if directive checks the value of show to decide if the paragraph should appear.

2fill in blank

medium

Complete the code to toggle the show variable when the button is clicked.

Vue

<template>
  <button @click="[1]">Toggle</button>
  <p v-if="show">Visible Text</p>
</template>

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

function toggle() {
  show.value = !show.value
}
</script>

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

Ashow.value = !show.value

Btoggle

Cshow = !show

Dtoggle()

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable name instead of calling the function.

Trying to assign values directly in the template.

The button's click event calls the toggle() function to change show.

3fill in blank

hard

Fix the error in the template to correctly use v-if with the reactive variable show.

Vue

<template>
  <p v-if="[1]">Conditional Text</p>
</template>

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

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

Ashow.value

Bshow

Cshow()

Dshow.value()

Attempts:

3 left

💡 Hint

Common Mistakes

Using show without .value in script but not in template.

Trying to call show as a function.

In the template, you must use show.value to access the reactive value inside ref.

4fill in blank

hard

Fill both blanks to create a v-if that shows the message only if isLoggedIn is true and hasAccess is true.

Vue

<template>
  <p v-if="[1] && [2]">Welcome back!</p>
</template>

<script setup>
import { ref } from 'vue'
const isLoggedIn = ref(true)
const hasAccess = ref(false)
</script>

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

AisLoggedIn

BhasAccess

CisLogged

Daccess

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect variable names.

Using || instead of &&.

Both isLoggedIn and hasAccess must be true for the message to show.

5fill in blank

hard

Fill all three blanks to create a dictionary comprehension that maps each item to its length only if the length is greater than 3.

Vue

<script setup>
const items = ['apple', 'bat', 'carrot', 'dog']
const result = {
  [1]: [2] for [3] in items if [2] > 3
}
</script>

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

Aitem

Bitem.length

Dlength

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variable names.

Not using the length property correctly.

This creates an object where each item is a key and its length is the value, but only for items longer than 3 characters.