Testing props and events in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output when passing props?

Consider a Vue 3 component that receives a message prop and displays it inside a paragraph. What will be the rendered output if the prop message is set to 'Hello Vue'?

Vue

<template>
  <p>{{ message }}</p>
</template>

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

A <p>Hello Vue</p>

B <p>{{ message }}</p>

C <p>message</p>

D <p></p>

💡 Hint

Remember that props are reactive and their values are displayed, not the variable name.

The component receives the prop 'message' with value 'Hello Vue'. The template renders the value of message inside the paragraph, so the output is

Hello Vue

.

❓ state_output

intermediate

What event is emitted and what is the payload?

A Vue 3 component emits an event named update with a payload of 42 when a button is clicked. What will be the emitted event and payload after clicking the button once?

Vue

<template>
  <button @click="$emit('update', 42)">Click me</button>
</template>

<script setup>
// no additional script needed
</script>

A Event 'click' emitted with payload 42

B Event 'update' emitted with payload 'Click me'

C Event 'update' emitted with payload 42

D No event emitted

💡 Hint

Check the event name and the argument passed to $emit.

The button click triggers $emit with event name 'update' and payload 42, so the emitted event is 'update' with payload 42.

🔧 Debug

advanced

Why does the event emit with a warning?

A Vue 3 component tries to emit an event named submit on button click, but a console warning is shown in development. What is the likely cause?

Vue

<template>
  <button @click="$emit('submit')">Submit</button>
</template>

<script setup>
// no emits option declared
</script>

A The parent component must listen with @click, not @submit

B The event name 'submit' is reserved and cannot be emitted

C The button click handler syntax is incorrect

D The component must declare the event in the emits option to emit it properly

💡 Hint

Vue 3 requires declaring emitted events explicitly in some cases.

In Vue 3 with