Methods in Vue
Dec 20, 2022
Methods in Vue are defined in the methods object.
Vue.createApp({
data: () => ({ value: 0 }),
methods: {
getValue() {
return this.value;
}
},
template: `
<div>
<div>A function that returns the value of 'value'</div>
<div>{{getValue()}}</div>
</div>
`
}).mount('#app');Methods are reactive
If your Vue template uses a method, and a value that the method relies on changes, Vue will re-render the template.
For example, the following code correctly displays the current value, even though value is displayed using a method.
Vue.createApp({
data: () => ({ value: 0 }),
methods: {
getValue() {
return this.value;
},
incrementValue() {
this.value++;
}
},
template: `
<div>
<div>Change the Value of 'value'</div>
<div>
<button @click="incrementValue">Click me</button>
</div>
<div>Current Value: {{getValue()}}</div>
</div>
`
}).mount('#example');Methods can be async
Simply add the async keyword in front of your function name to make it async.
Async methods aren't useful for displaying in templates, but they are helpful for making API requests when the user clicks a button or submits a form.
Vue.createApp({
data: () => ({ response: '' }),
methods: {
async makeRequest() {
const res = await fetch('https://httpbin.org/get').
then(res => res.json());
this.response = res;
}
},
template: `
<div>
<div>Make an async request</div>
<div>The response: {{response}} </div>
<div>
<button @click="makeRequest">Click Me</button>
</div>
</div>
`
}).mount('#async')When not to use Methods
When it comes to display or formatting related logic, you should use computed properties.
Methods should only be used for event handlers and formatting in a v-for that is dependent on the state of the loop.
Vue School has some of our favorite Vue
video courses. Their Vue.js Master Class walks you through building a real
world application, and does a great job of teaching you how to integrate Vue
with Firebase.
Check it out!
Did you find this tutorial useful? Say thanks by starring our repo on GitHub!