Skip to content

Vue.js 2 Methods

FULL-STACK WEB DEVELOPMENT BOOTCAMP

2024 COHORT SIGNUPS END TOMORROW

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

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.

β†’ Get my Vue.js 2 Handbook
  • Learn modern web development in my BOOTCAMP (SIGNUP END TOMORROW FEB 20, 2024)
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ coding BOOKS, all available in THE VALLEY OF CODE PRO
  • Indie solopreneur internet business masterclass SOLO LAB (summer 2024)