Crea una cuenta y continúa aprendiendo 🚀

Regístrate o inicia sesión para continuar aprendiendo:

Frontend Aprendiz

Options API: Métodos

Veamos cómo definir métodos para nuestro componente, usando Options API.

Definiendo Métodos en Vue

Nosotros podemos escribir código JavaScript directamente aquí para que se ejecute cuando se haga clic sobre un botón.

Pero esto no es recomendable porque generalmente queremos tener una lógica más extensa que consta de varias líneas.

Es por eso que Vue nos permite también definir métodos.

Así como este data permite definir el estado de nuestro componente, podemos definir métodos para nuestro componente.

Creando un Método

Por ejemplo, vamos a definir un método increase para incrementar el valor de nuestro contador.

Entonces aquí haremos:

count += 1;

Cuando queremos acceder a un estado de nuestro componente, tenemos que escribir al inicio this.

De esta manera, podemos acceder a las variables de estado que definimos dentro de este objeto que es devuelto por data.

Accediendo al Estado del Componente

Entonces, de esta manera vamos a aumentar nuestro contador en 1.

Recuerda que esto es equivalente a escribir:

count = count + 1;

Es lo mismo. Simplemente estamos abreviando la asignación del valor aumentado en 1.

Llamando al Método

Aquí ya no vamos a ejecutar esta lógica directamente, sino que simplemente vamos a llamar al método increase.

Guardamos los cambios.

Nuestro contador vuelve a cero, pero si usamos el botón, aún podemos seguir aumentando el valor del contador.

De esta manera es como podemos definir métodos en Vue.

Esta lección no cuenta con recursos adicionales.

Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.

Nosotros podemos escribir código JavaScript directamente aquí para que se ejecute cuando se haga click sobre un botón. Pero esto no es recomendable porque generalmente queremos tener una lógica más extensa que consta de varias líneas. Es por eso que Vue nos permite también definir métodos. Así como este "data" permite definir el estado de nuestro componente, podemos definir métodos. Podemos definir métodos para nuestro componente. Por ejemplo, vamos a definir un método "increase" para incrementar el valor de nuestro contador. Entonces aquí haremos "count+=1". Cuando queremos acceder a un estado de nuestro componente tenemos que escribir al inicio "this". De esta manera podemos acceder a las variables de estado que definimos dentro de este objeto que es devuelto por "data". Entonces, de esta manera vamos a aumentar nuestro contador en 1. Recuerda que esto es equivalente a escribir “count=count+1”. Es lo mismo. Simplemente estamos abreviando la asignación del valor aumentado en 1. Entonces aquí ya no vamos a ejecutar esta lógica, sino que simplemente vamos a llamar al método "increase". Guardamos los cambios. Nuestro contador vuelve a cero. Pero si usamos el botón, aún podemos seguir aumentando el valor del contador. De esta manera es como podemos definir métodos.

¿Tienes dudas?

Publicar pregunta

¡Comparte conocimiento!

X

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos























23

Options API: Métodos





































































































Espera un momento 🎁 ...

¿Te gustaría aprender a programar, gratis?

Mago de Programación y más

Sólo debes registrarte 😉.