Vue.js Methods

A Vue method is a function associated with the Vue instance. Methods are defined inside the `methods` property. Let's see how they work.

• What are Vue.js methods
• Pass parameters to Vue.js methods
• How to access data from a method

What are Vue.js methods

A Vue method is a function associated with the Vue instance.

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 just pass the parameter in the template, and you

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

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.