Prop types and validation in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a Vue component receives a prop with the wrong type?

Consider a Vue 3 component that declares a prop with type Number. What will happen if the parent passes a String instead?

Vue

<script setup>
const props = defineProps({
  age: Number
})
</script>
<template>
  <p>Age: {{ age }}</p>
</template>

A Vue will automatically convert the string to a number before rendering.

B Vue will show a console warning about the type mismatch but still render the component with the passed string value.

C Vue will throw a runtime error and stop rendering the component.

D Vue will ignore the prop and use a default value of 0.

💡 Hint

Vue's prop validation warns but does not block rendering.

Vue checks prop types during development and logs warnings in the console if types don't match. It does not stop rendering or convert types automatically.

📝 Syntax

intermediate

Which prop declaration correctly validates a required string with a custom validator?

You want a prop named username that must be a string, is required, and must be at least 3 characters long. Which option is correct?

A username: { type: String, required: true, validator: val => val > 3 }

B username: { type: String, required: true, validate: val => val.length >= 3 }

C username: { type: String, required: true, validator: val => val.length >= 3 }

D username: { type: String, required: true, validator: val => val.length > 3 }

💡 Hint

The validator function receives the prop value and returns true or false.

The correct key is validator. The function checks val.length >= 3 to allow strings with 3 or more characters. Option C excludes length 3, which is not correct.

🔧 Debug

advanced

Why does this prop validation not warn when passing a number?

This Vue component declares a prop with type [String, Number]. But when passing a boolean, no warning appears. Why?

Vue

<script setup>
const props = defineProps({
  value: {
    type: [String, Number],
    required: true
  }
})
</script>

A Vue does not warn because the prop type array allows multiple types, but boolean is not one of them, so it should warn but the warning is suppressed in production mode.

B Vue does not warn because the prop is required, so any value is accepted without warning.

C Vue only warns for types declared in the array; boolean is not included, so it should warn but doesn't due to a bug.

D Vue does not warn because the prop type array only checks the first type, ignoring others.

💡 Hint

Vue warnings only appear in development mode, not production.

Vue warns about type mismatches only in development mode. If running in production, warnings are suppressed. The prop type array does not include boolean, so passing boolean should warn in development.

❓ state_output

advanced

What is the value of props.count after mounting?

Given this Vue component, what will props.count be if the parent passes no value?

Vue

<script setup>
const props = defineProps({
  count: {
    type: Number,
    default: 10
  }
})
</script>
<template>
  <p>{{ count }}</p>
</template>

A undefined

B 0

C null

D 10

💡 Hint

Default values are used when no prop is passed.

If the parent does not pass a value, Vue uses the default value specified in the prop declaration.

🧠 Conceptual

expert

Why use defineProps with TypeScript types instead of runtime validators in Vue 3?

In Vue 3 with TypeScript, what is the main advantage of using defineProps<Type>() over runtime prop validation objects?

A TypeScript types provide compile-time checking and better editor support without runtime overhead.

B Runtime validators are faster and more reliable than TypeScript types.

C Using <code>defineProps&lt;Type&gt;()</code> disables all runtime prop validation.

D TypeScript types automatically convert prop values to the correct type at runtime.

💡 Hint

Think about when TypeScript checks types versus when Vue validates props.

TypeScript types help catch errors before running the app and improve developer experience. Runtime validators check types during execution but add overhead.