Cómo crear y usar métodos en Vue

Antes de empezar te recomiendo echar un ojo a la parte de Variables de Vue ya que este artículo supone que esta parte ya la conoces.

Cómo se crean los métodos en Vue

Vue también ofrece la posibilidad de poder crear métodos para poder llamarlos dentro del componente.

Vamos al lío. Lo primero que tienes que saber es que los métodos se crean dentro del componente en una sección llamada methods. Dentro de esta sección se crea cada uno de los métodos, separados por comas, por ejemplo:

<script>
  export default {
    methods: {
      print() {
        console.log("Esto es un método");
      },
	  anotherMethod() {
        console.log("Esto es otro método diferente al anterior");
      }
    }
  };
</script>

¿Y cómo se ejecutan los métodos? Pues bien, como pasaba con las variables, para llamar a un método, siempre que estemos en la parte del script del componente, es decir, en el Javascript del componente, puedes ejecutar el método con el this, por ejemplo:

<script>
  export default {
    methods: {
      print(value) {
        console.log(this.double(value));
      },
	  double(value) {
        return value * 2;
      }
    }
  };
</script>

Obviamente desde los métodos también puedes llamar a variables del data:

<script>
  export default {
    data: () => ({
	  myValue: 10
	}),
    methods: {
      print(value) {
        console.log(this.myValue);
      }
    }
  };
</script>

Ojo porque pillará el valor que tenga la variable del data en ese instante. Si modificas la variable y luego llamas al método (desde otro sitio por ejemplo) pues la variable tendrá el valor nuevo y no el viejo.

Otra cosa importante es que modificar una variable del data no hace que se ejecute automáticamente el método que usa esa variable, tienes que llamar al método si quieres que se ejecute con el nuevo valor.

Si quieres tener un método que se llame automáticamente cuando una variable del data cambia echa un ojo a las Las computadas en Vue

Variables locales en los métodos

Puedes crear variables locales, es decir, internas a los métodos:

<script>
  export default {
    data: () => ({
      value: 20
    }),
    methods: {
      calculate() {
        let aux = this.value * 2;
        console.log(aux);
      }
    }
  };
</script>

Mucho ojo porque estas variables locales a los métodos NO se pueden llamar desde otros métodos, solo son accesibles desde el método en el que las creas.

Si quieres usar una variable de estas en varios métodos, tienes que pasarla como parámetro al otro método o crearla dentro del data.

Llamar a métodos desde la vista

Los métodos se pueden ejecutar directamente en la vista, por ejemplo:

<template>
  <div class="content">
    {{ calculate() }}
  </div>
</template>

<script>
  export default {
    data: () => ({
      value: 20
    }),
    methods: {
      calculate() {
        return this.value * 2;
      }
    }
  };
</script>

Igual que pasa con las Variables de Vue, para ejecutar el método en la vista tienes que usar la sintaxis de las dobles llaves.

Como he explicado antes, lo malo de los métodos es que si ahora la variable del data de value cambia, en la vista seguirá apareciendo 40, NO se vuelve a lanzar el metodo de calculated().

Por eso se recomienda que si necesitas ejecutar algo que dependa de variables del data que uses las Las computadas en Vue .

Otra cosa que tienen los métodos es que se pueden usar como handler para ejecutarse con eventos de Vue. Si quieres saber más del tema echa un vistazo a Eventos entre componentes en Vue y también a Eventos de click en Vue .