Métodos y la directiva v-on en Vue js

Así como se puede configurar una propiedad data dentro de una instancia de vue también tenemos otra propiedad importante:

Methods

Esta propiedad nos permite declarar funciones que pueden ser invocadas
dentro de una plantilla gracias al uso de la directiva v-on.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
  <button type="button" v-on:click="saludar">
    Saludar
  </button>
</div>
<script>
  new Vue({
    el: "#app",
    methods: {
      saludar: function() {
        alert("Hola");
      }
    }
  });
</script>

La directiva acepta como string el nombre de algún método creado en nuestra propiedad methods.

Pasar parámetros a un método usando v-on

En el ejemplo anterior simplemente indicamos el nombre del método, pero
imaginemos que queremos pasar algún parámetro desde nuestro template al método, tendríamos que enviar el parámetro tal como cuando invocamos un método en el javascript de toda la vida.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
  <button type="button" v-on:click="saludar('Eduardo')">
    Saludar
  </button>
</div>
<script>
  new Vue({
    el: "#app",
    methods: {
      saludar: function(name) {
        alert("Hola" + name);
      }
    }
  });
</script>

Accediendo a información del evento

Cuando se genera un evento en javascript siempre se incluye información del mismo en un objeto. En Vue también podemos acceder a este usando una variable especial llamada \$event.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
  <button type="button" v-on:click="saludar($event)">
    Saludar
  </button>
</div>
<script>
  new Vue({
    el: "#app",
    methods: {
      saludar: function(event) {
        alert("Coordenadas del botón:" + event.screenX + " " + event.screenY);
      }
    }
  });
</script>

También podemos hacer una combinación de parámetros:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
  <button type="button" v-on:click="saludar($event, 'Eduardo')">
    Saludar
  </button>
</div>
<script>
  new Vue({
    el: "#app",
    methods: {
      saludar: function(event, name) {
        alert("Coordenadas del botón:" + event.screenX + " " + event.screenY);
        alert(name);
      }
    }
  });
</script>

Por último cuando a v-on solo le indicamos el nombre del método vue envía por defecto todos los parámetros existentes de ese evento. Eso quiere decir que al hacer esto:

1
2
3
4
5
6
<div id="app">
  <!-- solo indicamos el nombre del método -->
  <button type="button" v-on:click="saludar">
    Saludar
  </button>
</div>

Ya podremos acceder a la variable \$event en nuestro método:

1
2
3
4
5
6
7
8
new Vue({
  el: "#app",
  methods: {
    saludar: function(event) {
      alert("Coordenadas del botón:" + event.screenX + " " + event.screenY);
    }
  }
});

Si el evento click enviara más parámetros también lo tendríamos disponible en la definición de nuestro método.

Accediendo a data desde los métodos

Dentro de los métodos podemos acceder a cualquier variable definida en nuestro objeto data usando this más el nombre de la variable que deseamos usar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
  <button type="button" v-on:click="showFullName">
    Mostrar Nombre
  </button>
</div>
<script>
  new Vue({
    el: "#app",
    data: {
      firstName: "Eduardo",
      lastName: "P. Rivero"
    },
    methods: {
      showFullName: function() {
        alert(this.firstName + " " + this.lastName);
      }
    }
  });
</script>

También podemos asignar valores a las variables como lo haríamos con cualquier variable en javascript.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div id="app">
  <button type="button" v-on:click="doubleAge">
    Duplicar mi Edad
  </button>
  <p>
    Mi edad es {{age}}
  </p>
  <p v-if="ageByTwo">
    Mi edad duplicada es {{ageByTwo}}
  </p>
</div>
<script>
  new Vue({
    el: "#app",
    data: {
      firstName: "Eduardo",
      lastName: "P. Rivero",
      age: 33,
      ageByTwo: 0
    },
    methods: {
      doubleAge: function() {
        // Asignamos nuevo valor a variable
        this.ageByTwo = this.age * 2;
      }
    }
  });
</script>

Aunque vimos los ejemplos usando el evento click vue soporta cualquier evento del DOM

Alias @

Para ahorrarnos algunos caractéres existe una forma corta de referenciar a un método usando v-on mediante el símbolo @

1
2
3
4
5
<div id="app">
  <button type="button" @click="saludar">
    Saludar
  </button>
</div>

Esto cubre lo básico sobre los métodos en Vue, nunca está de más leer la documentación para ahondar en este y otros conceptos. 🚀