Method handlers vs inline handlers in Vue - Hands-On Comparison

Method handlers vs inline handlers in Vue

📖 Scenario: You are building a simple Vue app that shows a button to greet the user. You want to learn how to handle button clicks using two ways: method handlers and inline handlers.

🎯 Goal: Create a Vue component that has a button. When clicked, it shows an alert with a greeting message. First, use a method handler. Then, add an inline handler that shows a different alert message.

📋 What You'll Learn

Create a Vue component using the <script setup> syntax

Add a method called sayHello that shows an alert with the message 'Hello from method!'

Add a button that uses @click="sayHello" to call the method handler

Add a second button that uses an inline handler @click="alert('Hello from inline!')"

Use semantic HTML and accessible button elements

💡 Why This Matters

🌍 Real World

Buttons with click handlers are common in web apps for user interactions like submitting forms or showing messages.

💼 Career

Understanding method vs inline handlers is essential for writing clean, maintainable Vue components in professional frontend development.

1

Create the Vue component and method handler

Create a Vue component with <script setup>. Inside it, define a method called sayHello that shows an alert with the message 'Hello from method!'.

Vue

  



// Define the sayHello method here
// Your code here

Need a hint?

Use function sayHello() { alert('Hello from method!') } inside <script setup>.

2

Add a button with method handler

Inside the <template>, add a button element with the text Greet with Method. Use @click="sayHello" on the button to call the method handler when clicked.

Vue

  
  



function sayHello() {
  alert('Hello from method!');
}

Need a hint?

Use <button @click="sayHello">Greet with Method</button> inside the template.

3

Add a button with inline handler

Add a second button inside the <template> with the text Greet Inline. Use an inline click handler @click="alert('Hello from inline!')" on this button.

Vue

  Greet with Method
  
  



function sayHello() {
  alert('Hello from method!');
}

Need a hint?

Add <button @click="alert('Hello from inline!')">Greet Inline</button> inside the template.

4

Add accessibility and finalize component

Add aria-label attributes to both buttons for accessibility. Use aria-label="Greet with method button" on the first button and aria-label="Greet inline button" on the second button.

Vue

  Greet with Method
  Greet Inline
  
  



function sayHello() {
  alert('Hello from method!');
}

Need a hint?

Add aria-label attributes inside the <button> tags for accessibility.