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 marcar como "active" al list item correspondiente a la ruta que está visitando el usuario. Esto con la intención de resaltar la categoría escogida.
Actualmente, nuestro toolBar
ya determina correctamente qué botón debe estar activo.
Sin embargo, aún falta aplicar esto a nuestras categorías en el lado izquierdo.
Nos dirigimos a CategoryList
y agregamos un elemento active
a nuestro list.Item
.
Para hacer una prueba inicial, si le asignamos active=true
al list.Item
que dice "todas", vemos que se termina pintando.
Este atributo funciona correctamente y recibe un valor booleano para determinar si queremos que se pinte o no.
Aquí agregamos nuestra condición: si la ruta actual tiene como nombre home
, hacemos que la opción "todas" se pinte.
Hasta aquí vamos bien, pero aún falta aplicar lo mismo para las dos categorías de la parte inferior.
Para este list-Item
, primero escribimos:
active=
Ahora definimos la condición. Si ponemos rute.name=category
, funcionará, pero pintará ambas rutas:
Esto ocurre porque ambas representan la ruta con nombre category
.
La diferencia está en el parámetro de la ruta. Entonces, accedemos a sus parámetros y específicamente a categoryId
.
Si la ruta en la que nos encontramos tiene un categoryId
que es igual al categoryId
del ítem, queremos que se pinte.
Aquí nos resalta un error porque nos dice que categoryId
es una cadena.
Para solucionarlo, convertimos el valor a number
, permitiendo la comparación.
Guardamos y verificamos:
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Actualmente nuestro toolBar ya determina correctamente qué botón queremos que esté activo. Sin embargo, eso falta aplicar para nuestras categorías de lado izquierdo. Entonces nos dirigimos a “CategoryList” y vamos a agregar un elemento "active" a nuestro list. Item. Primero, sólo para hacer una prueba. Si le ponemos “active=true” a nuestro list item que dice “todas” vemos que se termina pintando. Entonces este atributo nos funciona correctamente y recibe un valor booleano para determinar si queremos que se pinte o no. Entonces aquí vamos a poner nuestra condición. Si la ruta actual tiene como nombre “home”, vamos a hacer que la opción “todas” se pinte. Entonces, aquí estamos. Vamos a “oficina”, no se pinta. Vamos a “computadora”, no se pinta. Nos vamos a “todas”. Si se pinta. Hasta aquí vamos bien. Nos falta aplicar lo mismo para las dos categorías de la parte inferior. ¿Cuál sería la condición para este “list-Item”? Primero ponemos “active=”, y aquí tenemos que escribir la condición. Si ponemos “rute.name=category”, funcionará, pero pintará a ambas rutas. Por ejemplo, si nos vamos a “oficina” se pinta tanto "oficina" como "computadora" y si nos vamos a “computadora”, también se pinta "oficina" porque ambos representan a la ruta con nombre "category". La diferencia está en el parámetro de ruta. Por lo tanto, aquí vamos a agregar una condición desde esta ruta vamos a acceder a sus parámetros y vamos a acceder específicamente al "categoryId". Si la ruta en la que nos encontramos tiene un “categoryId”, que es igual a la “categoryId”, en ese caso queremos que se pinte. Sin embargo, aquí nos resalta esto porque nos dice que esto va a ser una cadena. Lo que vamos a hacer, entonces, es convertir esto a “number” y entonces la comparación será posible. Guardamos y aquí tenemos solo resaltado la opción que dice "computadora". Aquí solo la opción que dice "oficina". Y aquí sólo la opción que dice “todas”.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
06
08
09
30
35
38
44
48
49
56
79
81
82
84
97
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 😉.