Passing arguments to handlers in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be the output when clicking the button?

Consider this Vue 3 component using the Composition API. What will be logged to the console when the button is clicked?

Vue

<template>
  <button @click="handleClick(5)">Click me</button>
</template>

<script setup>
import { ref } from 'vue'

function handleClick(num) {
  console.log(num * 2)
}
</script>

A 10

B NaN

C undefined

D Error: handleClick is not a function

💡 Hint

Remember how arguments are passed directly in Vue event handlers.

The handleClick function receives the argument 5 and logs 5 * 2 = 10.

📝 Syntax

intermediate

Which option correctly passes an argument to the event handler?

In Vue 3, which of the following syntaxes correctly passes the argument 42 to the submitForm method when a button is clicked?

A <button @click="submitForm{42}">Submit</button>

B <button @click="submitForm(42)">Submit</button>

C <button @click="submitForm=>42">Submit</button>

D <button @click="submitForm:42">Submit</button>

💡 Hint

Vue event handlers use parentheses to pass arguments.

Option B uses the correct syntax to call submitForm with argument 42.

🔧 Debug

advanced

Why does this handler not receive the argument?

Given this Vue 3 component snippet, why does handleClick receive undefined instead of the expected number?

Vue

<template>
  <button @click="handleClick">Click me</button>
</template>

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

A Because the function is missing an arrow syntax, it cannot receive arguments.

B Because the function is not declared with ref(), it cannot receive arguments.

C Because Vue automatically passes the event object, num should be the event, not undefined.

D Because the handler is called without parentheses, no argument is passed, so num is undefined.

💡 Hint

Think about how Vue calls event handlers without explicit arguments.

Without parentheses, Vue calls handleClick with the event object by default. Since num expects a number but receives the event, and no argument is passed, it logs undefined.

❓ state_output

advanced

What is the value of count after clicking the button twice?

Analyze this Vue 3 component. What will be the value of count after clicking the button two times?

Vue

<template>
  <button @click="increment(2)">Add 2</button>
  <p>{{ count }}</p>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)

function increment(amount) {
  count.value += amount
}
</script>

A 0

B 2

C 4

D NaN

💡 Hint

Each click adds 2 to count. Two clicks add 4 total.

Starting at 0, two clicks each add 2, so count becomes 4.

🧠 Conceptual

expert

Which option correctly passes both the event and a custom argument to the handler?

In Vue 3, you want to pass the native event object and a custom argument id to your handler handleClick. Which option achieves this correctly?

A <button @click="event => handleClick(event, id)">Click</button>

B <button @click="handleClick($event, id)">Click</button>

C <button @click="handleClick(id, $event)">Click</button>

D <button @click="handleClick(id)">Click</button>

💡 Hint

Use an inline arrow function to pass both event and custom arguments.

Option A uses an inline arrow function to pass the event and id explicitly. Option A is invalid syntax in Vue templates. Option A swaps argument order incorrectly. Option A passes only id.