How to use methods in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Using methods is fundamental for organizing component logic in Vue applications, providing a clean way to handle events, perform calculations, and execute reusable functions. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented thousands of Vue methods across components for form handling, data manipulation, API calls, and user interactions in enterprise applications. From my expertise, the most effective approach is to define methods in the methods option with proper naming conventions. This method provides clear component organization, automatic this binding, and excellent debugging experience while maintaining code readability and component reusability.
Define methods in the methods option for handling events, calculations, and reusable component logic.
<template>
<div class="counter-app">
<h2>{{ title }}</h2>
<p>Count: {{ count }}</p>
<p>Double: {{ getDoubleCount() }}</p>
<div class="controls">
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
<button @click="incrementBy(5)">+5</button>
<button @click="reset">Reset</button>
</div>
<div class="user-form">
<input
v-model="userInput"
@keyup.enter="addToCount"
placeholder="Enter number"
>
<button @click="addToCount">Add to Count</button>
</div>
<div class="history">
<h3>Action History</h3>
<ul>
<li v-for="action in history" :key="action.id">
{{ formatAction(action) }}
</li>
</ul>
<button @click="clearHistory">Clear History</button>
</div>
</div>
</template>
<script>
export default {
name: 'CounterApp',
data() {
return {
count: 0,
title: 'Vue Methods Example',
userInput: '',
history: []
}
},
methods: {
// Simple increment method
increment() {
this.count++
this.logAction('increment', 1)
},
// Simple decrement method
decrement() {
this.count--
this.logAction('decrement', 1)
},
// Method with parameter
incrementBy(amount) {
this.count += amount
this.logAction('increment', amount)
},
// Reset method
reset() {
const previousCount = this.count
this.count = 0
this.logAction('reset', previousCount)
},
// Method that returns a value
getDoubleCount() {
return this.count * 2
},
// Method with form input handling
addToCount() {
const value = parseInt(this.userInput)
if (!isNaN(value)) {
this.count += value
this.logAction('add', value)
this.userInput = ''
}
},
// Helper method for logging
logAction(type, amount) {
this.history.unshift({
id: Date.now(),
type,
amount,
timestamp: new Date()
})
},
// Method for formatting display
formatAction(action) {
const time = action.timestamp.toLocaleTimeString()
return `${time}: ${action.type} by ${action.amount}`
},
// Clear history method
clearHistory() {
this.history = []
}
}
}
</script>
Methods in Vue are defined in the methods option and automatically have this bound to the component instance. Use methods for event handlers, data manipulation, API calls, and any logic that modifies component state. Methods can accept parameters and return values. Unlike computed properties, methods are not cached and run every time they’re called. Use methods for actions and computed properties for derived data. Methods can access and modify data properties, call other methods, and emit events.
Best Practice Note:
This is the same approach we use in CoreUI Vue components for organizing component logic and handling user interactions. Use descriptive method names, keep methods focused on single responsibilities, avoid heavy computations in methods that are called frequently, and consider using computed properties for derived data instead of methods.
