Methods in Vue.js

By Darío Rivera

Posted On in Vue.js

A few days ago we saw the double data binding and the modifiers for the v-model directive in Vue.js. These two articles will help us explain today's topic, methods in Vue.js. You are probably already familiar with methods in JavaScript, as in Vue methods must be defined within the methods object of the Vue instance. Let's see the following definition of the sum method that performs addition on two attributes of the Vue instance.

var app = new Vue({
  el: '#app',
  data: {
    n1: 0,
    n2: 0
  },
  methods: {
    sum: function() {
      return this.n1 + this.n2;
    }
  }
});

As you can see, it is possible to use this to access Vue properties within a method. In this case the method returns the sum of the n1 and n2 properties. In the following codepen example, you can see the example in action. See you next time.

See the Pen Use of methods by Darío Rivera (@fermius) on CodePen.

Categories