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
.
Artículos que mencionan a este:
Aprende a crear tus primeros componentes de VueJS
Hello World en Vue, descubre la estructura que tienen los componentes y cómo crearlos
Aprende a usar el ciclo de vida de Vue (created, mounted, destroyed...)
Aprende a controlar todo el proceso de creación, actualización y destrucción de los componentes.
Roadmap para aprender VueJS desde 0 y en español
VueJS es un framework para Javascript para crear páginas webs completas. Al estilo React pero mucho más sencillo de usar
Atributos, clases y estilos dinámicos en VueJS
Atributos en el HTML Con Vue tienes la posibilidad de poner atributos HTML como el src de una imagen de tal forma que su valor venga desde Variables...
Cómo crear y usar propiedades computadas en Vue
En este artículo aprenderás a crear computed properties en Vue para poder tener valores que dependen de otros
Aprende las diferencias entre computadas y métodos en Vue
Si recientemente has aprendido a usar métodos y computadas te recomiendo este artículo para que aprendas las diferencias entre ambos