Vue.js 2 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 the Vue instance. You define it once, and you can call it from the template, from other methods, or from lifecycle hooks.

Methods are defined inside the methods property:

new Vue({
  methods: {
    handleClick: function() {
      alert('test')
    }
  }
})

or in the case of Single File Components:

<script>
export default {
  methods: {
    handleClick: function() {
      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>

new Vue({
  methods: {
    handleClick: function(text) {
      alert(text)
    }
  }
})

or in the case of Single File Components:

<script>
export default {
  methods: {
    handleClick: function(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>

export default {
  methods: {
    handleClick: function(text, event) {
      event.preventDefault()
      alert(text)
    }
  }
}

How to access data from a method

You can access any of the data properties of the Vue component by using this.propertyName:

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

<script>
export default {
  data() {
    return {
      name: 'Flavio'
    }
  },
  methods: {
    handleClick: function() {
      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.

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

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'
  }
}