Passing arguments to handlers in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to pass the event object to the handler.

Vue

<template>
  <button @click="handleClick([1])">Click me</button>
</template>

<script setup>
function handleClick(event) {
  console.log(event.type)
}
</script>

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

A$event

Bevent

Cthis

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'event' directly without $ sign.

Passing a string like 'click' instead of the event object.

In Vue, to pass the native event object to a handler, use $event.

2fill in blank

medium

Complete the code to pass a custom argument '42' to the handler.

Vue

<template>
  <button @click="handleClick([1])">Click me</button>
</template>

<script setup>
function handleClick(id) {
  console.log(id)
}
</script>

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

A'42'

Bid

C42

D$event

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the number as a string with quotes.

Using a variable name that is not defined.

To pass a number argument to a handler, just write the number without quotes.

3fill in blank

hard

Fix the error in passing both event and a custom argument to the handler.

Vue

<template>
  <button @click="handleClick([1], 5)">Click me</button>
</template>

<script setup>
function handleClick(event, number) {
  console.log(event.type, number)
}
</script>

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

A5

B$event

Cnumber

Devent

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'event' without $ sign.

Passing the number as the first argument.

Use $event to pass the native event object as the first argument.

4fill in blank

hard

Fill both blanks to pass event and a custom message to the handler.

Vue

<template>
  <button @click="handleClick([1], [2])">Click me</button>
</template>

<script setup>
function handleClick(event, message) {
  console.log(event.type, message)
}
</script>

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

A$event

B'Hello'

CHello

Devent

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the string without quotes.

Using 'event' instead of '$event'.

Pass $event for the event and a string with quotes for the message.

5fill in blank

hard

Fill all three blanks to pass event, id, and a flag to the handler.

Vue

<template>
  <button @click="handleClick([1], [2], [3])">Click me</button>
</template>

<script setup>
function handleClick(event, id, flag) {
  console.log(event.type, id, flag)
}
</script>

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

A$event

B10

Ctrue

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Passing booleans as strings.

Using 'event' instead of '$event'.

Pass $event for the event, a number for id, and a boolean for flag.