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.

Practice

1. In Vue, how do you pass an argument 42 to a click event handler named handleClick in the template?

easy

A. @click="handleClick:42"

B. @click="handleClick"

C. @click="handleClick(42)"

D. @click="handleClick=>42"

Solution

1. Step 1: Understand Vue event binding syntax

   Vue uses @click to bind click events and parentheses to pass arguments.

2. Step 2: Passing argument 42 to handler

   Using @click="handleClick(42)" calls handleClick with argument 42 on click.

3. Final Answer:

   @click="handleClick(42)" -> Option C

4. Quick Check:

   Use parentheses to pass arguments [OK]

Hint: Use parentheses after handler name to pass arguments [OK]

Common Mistakes:

• Omitting parentheses when passing arguments
• Using colon or arrow instead of parentheses
• Passing argument without quotes for strings

2. Which of the following is the correct syntax to pass a string argument 'hello' to a method sayHello in Vue template?

easy

A. @click="sayHello(hello)"

B. @click="sayHello('hello')"

C. @click="sayHello:"hello""

D. @click="sayHello{hello}"

Solution

1. Step 1: Recognize string argument syntax

   Strings must be wrapped in quotes inside parentheses when passed as arguments.

2. Step 2: Check each option

   Only @click="sayHello('hello')" correctly passes the string 'hello'. Others are invalid syntax.

3. Final Answer:

   @click="sayHello('hello')" -> Option B

4. Quick Check:

   Strings need quotes inside parentheses [OK]

Hint: Wrap string arguments in quotes inside parentheses [OK]

Common Mistakes:

• Passing string without quotes
• Using colon or braces instead of parentheses
• Confusing variable name with string literal

3. Given this Vue template snippet:

<button @click="increment(5)">Add 5</button>
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment(amount) {
  count.value += amount
}
</script>

What will be the value of count.value after clicking the button twice?

medium

A. 5

B. Error: amount undefined

C. 0

D. 10

Solution

1. Step 1: Understand initial state and handler

   Initially, count.value is 0. The increment function adds the passed amount to count.value.

2. Step 2: Calculate after two clicks

   Each click adds 5, so after two clicks: 0 + 5 + 5 = 10.

3. Final Answer:

   10 -> Option D

4. Quick Check:

   2 clicks x 5 each = 10 [OK]

Hint: Multiply clicks by argument to find new value [OK]

Common Mistakes:

• Assuming count resets after each click
• Forgetting to add amount to count
• Confusing ref value access syntax

4. What is wrong with this Vue template code?

<button @click="submitForm(formData)">Submit</button>
<script setup>
const formData = { name: 'Alice' }
function submitForm() {
  console.log(formData)
}
</script>

medium

A. The handler does not accept the argument passed

B. The formData object is not reactive

C. The event object is missing

D. The button tag is invalid

Solution

1. Step 1: Check handler parameters

   The template passes formData as an argument, but submitForm has no parameters defined.

2. Step 2: Understand mismatch effect

   This causes the argument to be ignored and may confuse the handler logic expecting parameters.

3. Final Answer:

   The handler does not accept the argument passed -> Option A

4. Quick Check:

   Handler must declare parameters to receive arguments [OK]

Hint: Match handler parameters with passed arguments [OK]

Common Mistakes:

• Not defining parameters in handler function
• Assuming reactive needed for argument passing
• Confusing event object with custom arguments

5. You want to pass both a custom argument id and the native event object to a Vue method handleClick. Which is the correct way to do this in the template?

hard

A. @click="handleClick(id, $event)"

B. @click="handleClick($event, id)"

C. @click="handleClick(id)"

D. @click="handleClick()"

Solution

1. Step 1: Understand argument order

   To pass both a custom argument and the event, list them in order inside parentheses.

2. Step 2: Use $event for native event

   $event is Vue's special variable for the native event object.

3. Step 3: Confirm correct syntax

   @click="handleClick(id, $event)" correctly passes id first, then the event.

4. Final Answer:

   @click="handleClick(id, $event)" -> Option A

5. Quick Check:

   Pass custom args before $event [OK]

Hint: Pass $event last to get native event object [OK]

Common Mistakes:

• Passing $event before custom arguments
• Forgetting to include $event for event object
• Calling handler without parentheses