Challenge - 5 Problems

🎖️

Vue Props Mastery

Get all challenges correct to earn this badge!

Test your skills under time pressure!

❓ component_behavior

intermediate

2:00remaining

What will be displayed by the child component?

Given the parent passes a prop message to the child, what will the child render?

Vue

<template>
  <ChildComponent :message="parentMessage" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'
import { ref } from 'vue'
const parentMessage = ref('Hello from parent')
</script>

<!-- ChildComponent.vue -->
<template>
  <p>{{ message }}</p>
</template>

<script setup>
const props = defineProps({
  message: String
})
</script>

AThe child displays nothing because props are not reactive

BThe child displays: {{ message }}

CThe child displays: Hello from parent

DThe child throws an error because message is not defined

Attempts:

2 left

📝 Syntax

intermediate

1:30remaining

Which option correctly defines a required string prop in Vue 3?

You want to define a prop named title that must be a string and is required. Which code snippet is correct?

Aconst props = defineProps({ title: { type: String, required: true } })

Bconst props = defineProps({ title: { type: String, isRequired: true } })

Cconst props = defineProps({ title: { type: 'string', required: true } })

Dconst props = defineProps({ title: String, required: true })

Attempts:

2 left

❓ state_output

advanced

2:00remaining

What is the output when the parent updates the prop?

If the parent changes the prop value after initial render, what will the child display?

Vue

<template>
  <ChildComponent :count="count" />
  <button @click="count++">Increment</button>
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
const count = ref(0)
</script>

<!-- ChildComponent.vue -->
<template>
  <p>Count is: {{ count }}</p>
</template>

<script setup>
const props = defineProps({ count: Number })
</script>

AThe child throws an error because props cannot change

BThe child shows the initial count value and does not update

CThe child shows undefined because count is not reactive

DThe child updates and shows the new count value each time the button is clicked

Attempts:

2 left

🔧 Debug

advanced

2:30remaining

Why does this child component fail to receive the prop?

The parent passes userName as a prop, but the child shows an empty string. What is the problem?

Vue

<!-- Parent.vue -->
<template>
  <ChildComponent user-name="Alice" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'
</script>

<!-- ChildComponent.vue -->
<template>
  <p>User: {{ userName }}</p>
</template>

<script setup>
const props = defineProps({ userName: String })
</script>

AThe parent should bind the prop with a colon like <code>:userName="'Alice'"</code>

BThe child forgot to import the prop

CThe child must use <code>props.userName</code> instead of just <code>userName</code>

DThe parent uses kebab-case <code>user-name</code> but the child expects camelCase <code>userName</code> prop

Attempts:

2 left

🧠 Conceptual

expert

3:00remaining

What happens if a child tries to mutate a prop directly?

In Vue 3, if a child component tries to change a prop value directly, what will happen?

Vue

<template>
  <p>{{ count }}</p>
  <button @click="count++">Increase</button>
</template>

<script setup>
const props = defineProps({ count: Number })
</script>

AThe prop value changes and updates the parent automatically

BVue will warn in the console and the prop value will not change

CThe app crashes with a runtime error

DThe prop value changes locally but does not update the parent

Attempts:

2 left