Vue Methods
Define reusable functions in Vue components
🔧 What are Vue Methods?
Methods are functions defined in your Vue component that handle logic, calculations, and event responses. They make your code organized and reusable by grouping related functionality together in named functions.
<!-- Calling a method -->
<button @click="sayHello">Greet</button>
Output:
Method Concepts
Methods are the workhorses of your Vue components. They handle user interactions, process data, make calculations, and update your component's state. Unlike computed properties, methods run every time they're called and are perfect for actions that change data or have side effects.
Event Handlers
Respond to user actions
function handleClick() {
// Handle click
}Data Processing
Transform and manipulate data
function formatData(data) {
return data.toUpperCase()
}Calculations
Perform mathematical operations
function calculateTotal() {
return price * quantity
}Reusable Logic
Share code across component
function validateInput(val) {
return val.length > 0
}🔹 Basic Method Example
Define and use a simple method:
<template>
<div>
<button @click="showGreeting">Click to Greet</button>
<p>{{ message }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const message = ref('')
function showGreeting() {
message.value = 'Hello, welcome to Vue!'
}
</script>Output:
🔹 Methods with Parameters
Pass arguments to make methods flexible:
<template>
<div>
<button @click="addNumber(5)">Add 5</button>
<button @click="addNumber(10)">Add 10</button>
<p>Total: {{ total }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const total = ref(0)
function addNumber(num) {
total.value += num
}
</script>Output:
Total: 0
🔹 Methods with Return Values
Methods can return calculated values:
<template>
<div>
<input v-model="celsius" type="number" placeholder="Celsius">
<button @click="convert">Convert</button>
<p>{{ result }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const celsius = ref(0)
const result = ref('')
function celsiusToFahrenheit(c) {
return (c * 9/5) + 32
}
function convert() {
const fahrenheit = celsiusToFahrenheit(celsius.value)
result.value = `${celsius.value}°C = ${fahrenheit}°F`
}
</script>Output:
🔹 Multiple Methods Working Together
Combine methods to build complex functionality:
<template>
<div>
<input v-model="task" placeholder="Enter task">
<button @click="addTask">Add</button>
<button @click="clearAll">Clear All</button>
<ul>
<li v-for="(item, index) in tasks" :key="index">
{{ item }}
</li>
</ul>
</div>
</template>
<script setup>
import { ref } from 'vue'
const task = ref('')
const tasks = ref([])
function addTask() {
if (task.value.trim()) {
tasks.value.push(task.value)
task.value = ''
}
}
function clearAll() {
tasks.value = []
}
</script>Output:
🔹 Methods vs Computed Properties
Understanding when to use methods:
Use Methods When:
- Handling events (clicks, inputs, etc.)
- Performing actions with side effects
- You need to pass arguments
- The result should be recalculated every time
Use Computed Properties When:
- Deriving values from reactive data
- You need caching for performance
- The value depends only on reactive dependencies
- No side effects are needed