Method and Computed in Vue.js

Method

Method is a function related to Vue instance. They are defined inside methods property.

new Vue({

  methods: {

    handleClick: function() {

      alert('test')

    }

  }

})

Methods are very useful when you need to perform an action and attach a v-on on an element to handle the events.

If you want to pass a parameter to template.

new Vue({

  methods: {

    handleClick: function(text) {

      alert(text)

    }

  }

})

<template>

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

</template>

You can access data properties from method using this.propertyName

Computed property

In Vue.js you can do any data value using parenthesis. This allows us to do small computations also, but you can only use a single javascript expression. To overcome this limitation you can use computed property.

computed: {

  // a computed getter

  reversedMessage: function () {

    // `this` points to the vm instance

    return this.message.split('').reverse().join('')

  }

}

<p>Computed reversed message: "{{ reversedMessage }}"</p>