Vue.js Methods

• What are Vue.js methods
• Pass parameters to Vue.js methods
• How to access data from a method
• Methods vs computed properties
• Watch out for arrow functions

What are Vue.js methods

A Vue method is a function associated with a component. You define it once, and you can call it from the template, from other methods, or from lifecycle hooks. This guide targets Vue 3.

In modern Vue, the common path is Composition API with <script setup>:

<script setup>
function handleClick() {
  alert('test')
}
</script>

<template>
  <a @click="handleClick">Click me!</a>
</template>

Functions declared in <script setup> are available in the template automatically. No methods object needed.

If you prefer the Options API, methods live inside the methods property:

<script>
export default {
  methods: {
    handleClick() {
      alert('test')
    }
  }
}
</script>

Methods are especially useful when you need to perform an action and you attach a v-on directive on an element to handle events. Like this one, which calls handleClick when the element is clicked:

<template>
  <a @click="handleClick">Click me!</a>
</template>

Pass parameters to Vue.js methods

Methods can accept parameters.

In this case, you pass the argument in the template:

<template>
  <a @click="handleClick('something')">Click me!</a>
</template>

With <script setup>:

<script setup>
function handleClick(text) {
  alert(text)
}
</script>

Or with Options API:

<script>
export default {
  methods: {
    handleClick(text) {
      alert(text)
    }
  }
}
</script>

When you pass your own arguments this way, the original event object is no longer passed automatically. If you still need it, pass the special $event variable:

<template>
  <a @click="handleClick('something', $event)">Click me!</a>
</template>

<script setup>
function handleClick(text, event) {
  event.preventDefault()
  alert(text)
}
</script>

How to access data from a method

With Composition API, you close over the reactive state you declared with ref or reactive:

<template>
  <a @click="handleClick()">Click me!</a>
</template>

<script setup>
import { ref } from 'vue'

const name = ref('Flavio')

function handleClick() {
  console.log(name.value)
}
</script>

Inside the script you use .value on a ref. In the template Vue unwraps it for you, so you write {{ name }}.

With Options API, you access data properties with this.propertyName:

<template>
  <a @click="handleClick()">Click me!</a>
</template>

<script>
export default {
  data() {
    return {
      name: 'Flavio'
    }
  },
  methods: {
    handleClick() {
      console.log(this.name)
    }
  }
}
</script>

We don’t have to use this.data.name, just this.name. Vue does provide a transparent binding for us. Using this.data.name will raise an error.

As you saw before in the events description, methods are closely interlinked to events, because they are used as event handlers. Every time an event occurs, that method is called. For more on wiring clicks and other DOM events, see Vue events.

Methods vs computed properties

Both can give you a value derived from your data, but they behave differently.

A computed property is cached. Vue only recalculates it when one of its dependencies changes. A method runs every single time you call it, including on every re-render if you use it in the template.

My advice: use computed properties for derived data, and methods for actions, like handling a click or submitting a form.

Watch out for arrow functions

In the Options API, don’t define methods with arrow functions:

export default {
  data() {
    return {
      name: 'Flavio'
    }
  },
  methods: {
    handleClick: () => {
      console.log(this.name) //undefined
    }
  }
}

Arrow functions don’t get their own this. They take it from the surrounding scope, so Vue can’t bind the component instance to the method, and this.name is not what you expect.

Use a regular function, or the shorthand syntax, which works the same:

methods: {
  handleClick() {
    console.log(this.name) //'Flavio'
  }
}

With <script setup> this issue goes away. Methods are plain functions that close over your refs, so there is no this to worry about.

Want me to talk about your product? You can sponsor this site.