Method handlers vs inline handlers in Vue - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to call the method handleClick when the button is clicked.

Vue

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

<script setup>
function handleClick() {
  alert('Button clicked!')
}
</script>

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

AhandleClick

BhandleClick()

CclickHandler

DonClick

Attempts:

3 left

💡 Hint

Common Mistakes

Adding parentheses calls the method immediately instead of on click.

Using a wrong method name.

In Vue, to use a method as an event handler, you pass the method name without parentheses. Using handleClick calls the method when the event happens.

2fill in blank

medium

Complete the inline handler to show an alert with 'Hello!' when the button is clicked.

Vue

<template>
  <button @click="[1]">Say Hello</button>
</template>

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

AhandleHello

Balert

Calert('Hello!')

DsayHello()

Attempts:

3 left

💡 Hint

Common Mistakes

Using just alert without parentheses does not show the alert.

Using a method name that is not defined.

Inline handlers can contain JavaScript expressions. Here, alert('Hello!') runs when the button is clicked.

3fill in blank

hard

Fix the error in the method handler to prevent the method from running immediately.

Vue

<template>
  <button @click="[1]">Submit</button>
</template>

<script setup>
function submitForm() {
  console.log('Form submitted')
}
</script>

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

AsubmitForm

BsubmitForm()

Csubmit

DhandleSubmit()

Attempts:

3 left

💡 Hint

Common Mistakes

Including parentheses causes immediate execution.

Using a wrong method name.

Using submitForm() calls the method immediately. To run it on click, use submitForm without parentheses.

4fill in blank

hard

Fill both blanks to create a method handler that passes the event object to handleInput.

Vue

<template>
  <input @input="[1]($event)" />
</template>

<script setup>
function handleInput([2]) {
  console.log([2].target.value)
}
</script>

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

AhandleInput

Bevent

Ce

DinputEvent

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the event parameter in the method and in the code.

Not passing the event object explicitly.

The method handleInput is called with the event object event. The parameter name and usage must match.

5fill in blank

hard

Fill all three blanks to create an inline handler that calls updateCount with the new value from the event.

Vue

<template>
  <input @input="[1] = Number([2].target.value); [3]([1])" />
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
function updateCount(value) {
  count.value = value
}
</script>

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

Acount.value

B$event

CupdateCount

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Using count instead of count.value.

Not converting the input value to a number.

Not using the correct event object variable.

The inline handler updates count.value with the number from $event.target.value and calls updateCount with the new value.