Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Regístrate o inicia sesión para continuar aprendiendo:
Veamos cómo definir el estado de un componente usando Options API.
setup
Lo primero que vamos a hacer es eliminar este atributo setup
de la etiqueta script
.
¿Por qué?
setup
se usa cuando trabajamos con Composition API.export default
.data
.Cuando trabajamos con Options API, este método data
tiene que devolver un objeto con el estado de nuestro componente.
Pasos:
count
con el valor de nuestro conteo.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.
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.
Para que pueda contar, vamos a agregar un botón que va a decir Aumentar contador:
<button>Aumentar contador</button>
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
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
Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.