Methods in Vue.js

Vue instances can have methods defined in it along with data instances. In this article, we will look into the ‘methods’ property of the Vue instance.

Methods

The method property is where we define the functions that are to associated with the Vue instance. They are very useful for providing functionalities to directives, events or to get work done like regular reusable functions.

Let’s give this a test by creating a function to call alert when a button is clicked.

let app = new Vue({
  el: '#app',
  data: {
    message: 'ALERT!'
  },
  methods: {
    callAlert: function() {
      alert(this.message);
    }
  }
});

<div id="app">
  <button v-on:click="callAlert">Click me!</button>
</div>

Here we let the button know to call callAlert() function when it’s click event is triggered using the v-on directive. (You can go here to get a quick refresh on directives)

We don’t have to call a function as v-on:click=“callAlert()”. This is unnecessary. v-on:click=“callAlert” will suffice.

Then we go ahead and define the callAlert function inside the methods property of the Vue instance.

Now we want to show the value stored in the message data property in the alert box. We can access data properties inside methods using the this property. So, in this case, we can access the value of message using this.message. And that’s how we pass the value of message to the alert box.

There we go! We just called our very first method in Vue!

And this demonstrates how useful methods are in the case of event handling in Vue.js.

Passing Parameters

Like normal functions, Vue.js methods can also accept parameters. v-on:click=“methodName(param)” is how we can pass parameters to methods. Let’s try to expand this on our previous example.

let app = new Vue({
  el: '#app',
  methods: {
    callAlert: function(textMessage) {
      alert(textMessage);
    }
  }
});

<div id="app">
  <button v-on:click="callAlert('Parameter says hi!')">Click me!</button>
</div>

You can access the event object the way you usually do in normal Javascript functions.

But in case you need to accept another parameter along with the event object, we pass a keyword reserved by Vue in the method call, $event.

<input type="text" v-on:keydown="storeValue('Mr.', $event)">
<p>{{ value }}</p>

new Vue({
  el: '#exercise',
  data: {
    value: ''
  },
  methods: {
    storeValue: function(salutation, event) {
    	this.value = salutation + ' ' + event.target.value;
    }
  }
});

Here the output will have the salutation passed to the method, which we attach to the value.

Event and Key Modifiers

Calling event.preventDefault or event.stopPropogation inside event handlers is very common. Vue lets us skip this step of calling them inside the event handlers and thus have only data logic inside it. Vue provides event modifiers which can be postfixed with a dot after the v-on directive.

<!-- the propagation of the click event  will be stopped -->
<a v-on:click.stop="handleClick"></a>

<!-- the form submit event will no longer cause a reload of the page -->
<form v-on:submit.prevent="onFormSubmit"></form>

There are many other event modifiers like .capture, .self, etc. You can check them out in the official docs.

Key Modifiers on the other hand lets us listen for specific keys during keyboard events.

<!-- `handleInput()` will only be called when the key is `Enter` -->
<input v-on:keyup.enter="handleInput">

This can help us in cases where we want to change a data property only when enter is pressed. You can find many more key modifiers in the official docs.

Now that we have got our heads around Vue methods, it’s time for a challenge. Remember that we set up a counter that increments on every button click in the last post? Now you could try to do that with Vue.js methods! So you guys give that a try and let me know how it goes.

See you on the next post!

A blog by Gautham Lal where he documents his journey of learning Vue from the prespective of a Vue Newbie.