Emitting custom events in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to emit a custom event named 'update'.

Vue

<script setup>
const emit = defineEmits(['update'])

function sendUpdate() {
  emit([1])
}
</script>

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

A'update'

B'click'

C'submit'

D'change'

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the event name.

Using an event name not declared in defineEmits.

The emit function is called with the event name to emit. Here, the event name is 'update'.

2fill in blank

medium

Complete the code to declare an event named 'submitForm' using defineEmits.

Vue

<script setup>
const emit = defineEmits([[1]])
</script>

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

A'clickEvent'

B'submitForm'

C'inputChange'

D'loadData'

Attempts:

3 left

💡 Hint

Common Mistakes

Using event names not matching the emitted event.

Omitting quotes around the event name.

The defineEmits function takes an array of event names. Here, we declare the event 'submitForm'.

3fill in blank

hard

Fix the error in emitting the event 'closeModal' with a payload.

Vue

<script setup>
const emit = defineEmits(['closeModal'])

function close() {
  emit([1], true)
}
</script>

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

A'closeModal'

BcloseModal

C'closemodal'

D'close_modal'

Attempts:

3 left

💡 Hint

Common Mistakes

Using the event name without quotes.

Using incorrect casing in the event name.

The event name must be a string matching the declared event. It should be 'closeModal' with exact casing and quotes.

4fill in blank

hard

Fill both blanks to emit 'saveData' event with a payload object containing 'id' and 'value'.

Vue

<script setup>
const emit = defineEmits([[1]])

function save() {
  emit([2], { id: 1, value: 'test' })
}
</script>

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

A'saveData'

B'updateData'

C'deleteData'

D'loadData'

Attempts:

3 left

💡 Hint

Common Mistakes

Using different event names in declaration and emission.

Omitting quotes around event names.

Both blanks require the event name 'saveData' to declare and emit the event correctly.

5fill in blank

hard

Fill all three blanks to declare events 'open', 'close', and 'toggle' and emit 'toggle' with a boolean payload.

Vue

<script setup>
const emit = defineEmits([[1], [2], [3]])

function toggleState() {
  emit('toggle', true)
}
</script>

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

A'open'

B'close'

C'toggle'

D'submit'

Attempts:

3 left

💡 Hint

Common Mistakes

Missing one or more event names in the declaration.

Using event names not matching the emitted event.

The events 'open', 'close', and 'toggle' are declared in defineEmits. The function emits the 'toggle' event with a payload.