Métodos en Vue.js

Por Darío Rivera

Publicado el 2020-06-21 en Vue.js

Hace unos días vimos el enlace de datos doble y los modificadores a la directiva v-model en Vue.js. Estos dos artículos nos servirán para explicar el tema del día de hoy, los métodos en Vue.js. Probablemente ya estarás familiarizado con los métodos en JavaScript, pues en Vue los métodos deben definirse dentro del objeto methods de la instancia de Vue. Veamos la siguiente definición del método sum que realiza la suma sobre dos atributos de la instancia de Vue.

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

Como puedes ver es posible utilizar this para acceder a las propiedades de Vue dentro de un método. En este caso el método retorna la suma de las propiedades n1 y n2. En el siguiente ejemplo de codepen puedes ver el ejemplo en funcionamiento. Hasta la próxima

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

Categorías