Method handlers vs inline handlers in Vue - Practice Questions

Challenge - 5 Problems

❓ component_behavior

intermediate

Difference in event handling output

Consider a Vue 3 component with a button. Which option correctly shows the output when clicking the button using a method handler vs an inline handler?

Vue

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

<script setup>
import { ref } from 'vue'
const count = ref(0)
function handleClick() {
  count.value++
  console.log('Method count:', count.value)
}
</script>

A Clicking the button logs 'Method count: NaN' after first click.

B Clicking the button logs 'Method count: 1', then 'Method count: 2', etc.

C Clicking the button logs 'Method count: 0' every time.

D Clicking the button logs 'Method count: undefined' every time.

💡 Hint

Think about how the method updates the reactive count variable.

The method handler increments the reactive count variable and logs the updated value. So each click increases the count and logs the new number.

📝 Syntax

intermediate

Correct inline event handler syntax in Vue 3

Which option shows the correct inline event handler syntax to increment a reactive count variable on button click?

Vue

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

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

A @click="count.value++"

B @click="count++"

C @click="() => count.value++"

D @click="incrementCount()"

💡 Hint

Remember that count is a ref and you must access its value.

Since count is a ref, you must use count.value++ to update it inline. Using count++ will not update the reactive value.

🔧 Debug

advanced

Why does this inline handler not update the UI?

Given this Vue 3 code, why does clicking the button not update the displayed count?

Vue

<template>
  <button @click="count++">Click me</button>
  <p>Count: {{ count }}</p>
</template>

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

A Because the button click event is not bound correctly.

B Because the template cannot display ref variables directly.

C Because <code>count++</code> does not update the ref's value property.

D Because <code>count</code> is not initialized.

💡 Hint

Think about how refs work in Vue 3 and how to update them.

count is a ref object. Using count++ tries to increment the object itself, which does nothing. You must increment count.value to update the reactive value and the UI.

🧠 Conceptual

advanced

Performance difference between method handlers and inline handlers

Which statement best explains the performance difference between method handlers and inline handlers in Vue 3?

A Method handlers cause memory leaks while inline handlers do not.

B Inline handlers are more performant because they are simpler and shorter.

C Both have the same performance because Vue optimizes event handlers automatically.

D Method handlers are more performant because they avoid creating a new function on each render.

💡 Hint

Consider how Vue treats inline functions during rendering.

Inline handlers create a new function every render, which can cause unnecessary re-renders or memory use. Method handlers reuse the same function reference, improving performance.

❓ state_output

expert

State value after mixed method and inline handlers

Given this Vue 3 component, what is the value of count after clicking the 'Click me' button twice?

Vue

<template>
  <button @click="increment">Click me</button>
  <button @click="count.value++">Inline Increment</button>
  <p>Count: {{ count }}</p>
</template>

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

A 4

B 3

C 2

D 1

💡 Hint

The increment method adds 2 per click.

Clicking the first button calls increment() which adds 2. Clicking the second button adds 1. Two clicks total means 2 + 2 = 4 if clicking the first button twice, or mixed clicks add accordingly.

Practice

1. In Vue, what is the main advantage of using a method handler over an inline handler in a template?

easy

A. Methods improve code clarity and allow reuse across the component.

B. Methods run faster than inline handlers.

C. Methods can only be used for event listeners, not bindings.

D. Methods automatically update the DOM without reactivity.

Solution

1. Step 1: Understand method handlers in Vue

   Method handlers are functions defined in the component that can be called from the template. They help organize code and can be reused multiple times.

2. Step 2: Compare with inline handlers

   Inline handlers run simple expressions directly in the template but can become messy if complex logic is needed. Methods keep the template clean and code maintainable.

3. Final Answer:

   Methods improve code clarity and allow reuse across the component. -> Option A

4. Quick Check:

   Method handlers = clarity and reuse [OK]

Hint: Methods = reusable functions; inline = quick expressions [OK]

Common Mistakes:

• Thinking methods run faster than inline handlers
• Believing methods auto-update DOM without reactivity
• Confusing methods with inline expressions for simple tasks

2. Which of the following is the correct syntax to call a method named submitForm on a button click in Vue?

easy

A. Submit

B. Submit

C. Submit

D. Submit

Solution

1. Step 1: Understand method reference syntax in Vue templates

   To bind a method to an event handler, reference the method name without parentheses. Vue automatically calls it with the event object when the event fires.

2. Step 2: Analyze each option

   <button @click="submitForm">Submit</button> correctly references the method (Submit). <button @click="submitForm()">Submit</button> calls it immediately on render (Submit). <button v-on:click="submitForm()">Submit</button> also calls immediately (Submit). <button @click="submitForm.call()">Submit</button> uses invalid syntax (Submit).

3. Final Answer:

   <button @click="submitForm">Submit</button> -> Option A

4. Quick Check:

   Method reference = no parentheses () [OK]

Hint: Event handlers reference methods WITHOUT () [OK]

Common Mistakes:

• Adding parentheses, causing immediate execution on render
• Using incorrect .call() syntax
• Confusing method reference (no ()) with immediate call (with ())

3. Given this Vue component snippet:

<template>
  <button @click="count++">Increment</button>
  <p>Count: {{ count }}</p>
</template>

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

What happens when the button is clicked?

medium

A. Nothing happens because inline handlers cannot modify refs.

B. The count increases by 1 and updates the displayed number.

C. An error occurs because count++ is not allowed in templates.

D. The count resets to zero on each click.

Solution

1. Step 1: Understand inline handler behavior

   The inline handler @click="count++" directly increments the reactive count variable when clicked.

2. Step 2: Check reactivity and display update

   Since count is a ref, Vue tracks changes and updates the displayed value in {{ count }} automatically.

3. Final Answer:

   The count increases by 1 and updates the displayed number. -> Option B

4. Quick Check:

   Inline handler increments reactive count [OK]

Hint: Inline handlers can update reactive refs directly [OK]

Common Mistakes:

• Assuming inline handlers cannot modify refs
• Thinking count++ causes errors in templates
• Believing count resets on each click

4. Identify the error in this Vue template snippet:

<button @click="increment">Add</button>

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

medium

A. The ref must be declared inside the method.

B. The method name must be prefixed with 'handle'.

C. The @click should be @click="increment()" to call the method.

D. You cannot increment a ref directly with count++ inside the method.

Solution

1. Step 1: Check how to update a ref in Vue

   A ref's value must be updated via its .value property, not directly with count++.

2. Step 2: Analyze the method increment()

   The method tries to do count++, which is invalid because count is a ref object, not a number.

3. Step 3: Note the event handler syntax

   The @click="increment" is valid because Vue calls the method on click, so no error there.

4. Final Answer:

   You cannot increment a ref directly with count++ inside the method. -> Option D

5. Quick Check:

   Update ref with count.value++ [OK]

Hint: Update refs with .value, not directly [OK]

Common Mistakes:

• Trying to increment ref directly without .value
• Adding unnecessary prefixes to method names
• Confusing method call syntax in templates

5. You want to toggle a boolean isActive in your Vue component when a button is clicked. Which approach best balances clarity and simplicity?

hard

A. Use an inline handler: @click="isActive = !isActive" in the template.

B. Use both inline and method handlers together for the same event.

C. Use a method handler: define toggleActive() method and call it with @click="toggleActive()".

D. Use a computed property to toggle isActive on click.

Solution

1. Step 1: Consider clarity and reuse

   Using a method handler keeps the template clean and allows reuse if toggling is needed elsewhere.

2. Step 2: Compare inline handler

   Inline handler is simple but can clutter the template if logic grows or is reused.

3. Step 3: Evaluate other options

   Using both handlers together is redundant and confusing. Computed properties are for derived state, not event handling.

4. Final Answer:

   Use a method handler: define toggleActive() method and call it with @click="toggleActive()". -> Option C

5. Quick Check:

   Method handlers = clarity + reuse [OK]

Hint: Use methods for toggle logic to keep templates clean [OK]

Common Mistakes:

• Using inline handlers for complex or reusable logic
• Trying to toggle state in computed properties
• Combining inline and method handlers unnecessarily