Espera un momento ...
¿Te gustaría llevar mi curso de Laravel, gratis?
Sólo debes ingresar tus datos:
¡Suscríbete y continúa aprendiendo!
Esta lección está disponible únicamente para suscriptores.
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.
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