Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Options API: Estado
Veamos cómo definir el estado de un componente usando Options API.
Eliminando el atributo setup
Lo primero que vamos a hacer es eliminar este atributo setup de la etiqueta script.
¿Por qué?
- Porque
setupse usa cuando trabajamos con Composition API. - Vamos a empezar usando Options API.
Uso de Options API
- Lo único que vamos a necesitar es agregar
export default. - Dentro de este objeto que estamos exportando, vamos a agregar un método
data.
Definiendo el estado del componente
Cuando trabajamos con Options API, este método data tiene que devolver un objeto con el estado de nuestro componente.
Pasos:
- Como estamos creando un contador, vamos a crear una variable
countcon el valor de nuestro conteo. - Vamos a declarar que empiece con el valor de
0.
Con esto, nosotros estamos definiendo el estado de nuestro componente. Nuestro objeto principal, a través de este método data, define cuál va a ser el estado del componente y luego ya podemos usar este estado dentro de nuestro template.
Mostrando el contador en el template
Podemos escribir la palabra Contador y dentro de unas llaves podemos imprimir el valor de la variable count:
<p>Contador: {{ count }}</p>
Si hacemos esto, vamos a ver en nuestro navegador que ya tenemos este resultado.
Sin embargo, el contador todavía no cuenta.
Agregando un botón para incrementar el contador
Para que pueda contar, vamos a agregar un botón que va a decir Aumentar contador:
<button>Aumentar contador</button>
- Guardamos, y aquí tenemos nuestro botón.
- Si le damos clic, no pasa nada.
Asociando un evento al botón
Por ahora, nuestro botón no hace nada porque no le hemos asociado ningún evento.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Ok, Lo primero que vamos a hacer es eliminar este atributo setup de la etiqueta script. ¿Por qué? Porque setup se usa cuando trabajamos con Composition API. Vamos a empezar usando Options API. Por lo tanto, lo único que vamos a necesitar es agregar "export default". Dentro de este objeto que estamos exportando, vamos a agregar un método "data". Cuando trabajamos con Options API, este método "data" tiene que devolver un objeto con el estado de nuestro componente. Como estamos creando un contador, vamos a crear una variable "count" con el valor de nuestro conteo y vamos a declarar que empiece con el valor de cero. Con esto nosotros estamos definiendo el estado de nuestro componente, nuestro objeto principal a través de este método "data" define cuál va a ser el estado del componente y luego nosotros ya podemos usar este estado dentro de nuestro template. Por ejemplo, podemos escribir aquí la palabra contador y dentro de unas llaves podemos imprimir el valor de la variable "count". Si hacemos esto, vamos a ver en nuestro navegador que ya tenemos este resultado. Sin embargo, el contador todavía no cuenta. Para que pueda contar, vamos a agregar un botón que va a decir “aumentar contador”. Guardamos, y aquí tenemos nuestro botón. Si le damos clic, no pasa nada. Por ahora nuestro botón no hace nada porque no le hemos asociado ningún evento.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
06
08
09
21
Options API: Estado
30
35
38
44
48
49
56
79
81
82
84
99
107
112
119
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript