Props drilling problem in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to pass the prop from Parent to Child component.

Vue

<template>
  <ChildComponent [1]="message" />
</template>

<script setup>
const message = 'Hello from Parent!'
</script>

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

Av-bind:msg

Bmsg

C:msg

Dbind-msg

Attempts:

3 left

💡 Hint

Common Mistakes

Using the prop name without binding syntax.

Using incorrect attribute names like 'bind-msg'.

In Vue, to pass a prop, you use the colon : shorthand before the prop name, like :msg.

2fill in blank

medium

Complete the Child component to declare the received prop correctly.

Vue

<script setup>
defineProps({ [1]: String })
</script>

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

Amsg

Bmessage

Ctext

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different prop name than the Parent passes.

Forgetting to declare props in the Child component.

The Child component expects a prop named msg as declared in the Parent.

3fill in blank

hard

Fix the error in the nested component to receive the prop passed through multiple levels.

Vue

<template>
  <GrandChildComponent [1]="msg" />
</template>

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

Av-bind:message

B:message

Cv-bind:msg

D:msg

Attempts:

3 left

💡 Hint

Common Mistakes

Changing the prop name when passing it down.

Omitting the binding syntax.

The prop name msg must be passed down exactly as declared to the nested component.

4fill in blank

hard

Fill both blanks to correctly pass and declare the prop in the intermediate component.

Vue

<template>
  <ChildComponent [1]="msg" />
</template>

<script setup>
defineProps({ [2]: String })
</script>

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

A:msg

Bmessage

Cmsg

D:message

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching prop names between passing and declaring.

Forgetting the colon binding syntax.

The intermediate component passes the prop msg down and declares it with the same name.

5fill in blank

hard

Fill all three blanks to create a dictionary comprehension that filters and transforms props data.

Vue

const filteredProps = Object.fromEntries(Object.entries(props).filter(([[1], [2]]) => [3].startsWith('user')))

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

Akey

Bvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing key and value in destructuring.

Checking the key instead of the value.

This code extracts entries from props where the value starts with 'user'. The destructuring uses key and value, and the filter checks value.