Typing emits in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define an emit event named 'update' in a Vue component.

Vue

const emit = defineEmits<{ [1]: (value: string) => void }>()

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

A"update"

B"click"

C"submit"

D"change"

Attempts:

3 left

💡 Hint

Common Mistakes

Using an event name that does not match the intended emit event.

Forgetting to put the event name in quotes.

The emit event name must be exactly "update" to match the event we want to type.

2fill in blank

medium

Complete the code to type an emit event 'submit' that sends a number payload.

Vue

const emit = defineEmits<{ [1]: (id: number) => void }>()

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

A"input"

B"update"

C"click"

D"submit"

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong event name string.

Not matching the event name with the expected payload.

The event name must be "submit" to match the typed emit event that sends a number.

3fill in blank

hard

Fix the error in typing the emit event 'close' that sends no payload.

Vue

const emit = defineEmits<{ [1]: () => void }>()

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

A"toggle"

B"open"

C"close"

D"click"

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different event name than intended.

Confusing event names with similar meanings.

The event name must be "close" to correctly type the emit event with no payload.

4fill in blank

hard

Fill both blanks to type emits 'change' with a string payload and 'delete' with a number payload.

Vue

const emit = defineEmits<{ [1]: (value: string) => void; [2]: (id: number) => void }>()

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

A"change"

B"update"

C"delete"

D"remove"

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping event names and payload types.

Using incorrect event names.

Use "change" for the string payload event and "delete" for the number payload event.

5fill in blank

hard

Fill all three blanks to type emits: 'input' with a string, 'submit' with a number, and 'cancel' with no payload.

Vue

const emit = defineEmits<{ [1]: (text: string) => void; [2]: (id: number) => void; [3]: () => void }>()

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

A"cancel"

B"submit"

C"input"

D"close"

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up event names and payload types.

Using wrong event names.

Use "input" for the string payload, "submit" for the number payload, and "cancel" for no payload.