Prop types and validation in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a prop named title of type String.

Vue

<script setup>
const props = defineProps({
  title: [1]
})
</script>

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

AArray

BNumber

CBoolean

DString

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong type like Number for a text prop.

Not declaring the prop at all.

The title prop should be declared with type String to accept text values.

2fill in blank

medium

Complete the code to make the count prop required and of type Number.

Vue

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

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

ANumber

BString

CBoolean

DObject

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to set required: true.

Using the wrong type for the prop.

The count prop must be a Number and is marked as required.

3fill in blank

hard

Fix the error in the prop validation by completing the validator function to accept only even numbers.

Vue

<script setup>
const props = defineProps({
  evenNumber: {
    type: Number,
    validator: value => value [1] 2 === 0
  }
})
</script>

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

A%

B===

C+

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Using === instead of % for the check.

Not returning a boolean from the validator.

The modulo operator % checks if the number is divisible by 2 with no remainder, meaning it is even.

4fill in blank

hard

Fill both blanks to declare a status prop with type String and a default value of 'active'.

Vue

<script setup>
const props = defineProps({
  status: { type: [1], default: [2] }
})
</script>

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

AString

B'inactive'

C'active'

DBoolean

Attempts:

3 left

💡 Hint

Common Mistakes

Using a Boolean type instead of String.

Setting the wrong default value.

The status prop is a String and defaults to 'active' if not provided.

5fill in blank

hard

Fill all three blanks to declare a user prop as an Object with required true and a validator that checks if it has a name property.

Vue

<script setup>
const props = defineProps({
  user: {
    type: [1],
    required: [2],
    validator: obj => obj && typeof obj.name === [3]
  }
})
</script>

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

AObject

Btrue

C'string'

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Setting required to false or forgetting it.

Using wrong type for the validator check.

The user prop is an Object, required, and the validator checks if name is a string.