Crea una cuenta y continúa aprendiendo 🚀

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

Frontend Aprendiz

VList: Active Category Item

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.

Aplicando "active" a las categorías en "CategoryList"

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.

Agregando "active" al List Item

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.

Condición para activar "todas"

Aquí agregamos nuestra condición: si la ruta actual tiene como nombre home, hacemos que la opción "todas" se pinte.

Vamos a "oficina": no se pinta.
Vamos a "computadora": no se pinta.
Nos vamos a "todas": sí se pinta.

Hasta aquí vamos bien, pero aún falta aplicar lo mismo para las dos categorías de la parte inferior.

Condición para las demás categorías

Para este list-Item, primero escribimos:

active=

Ahora definimos la condición. Si ponemos rute.name=category, funcionará, pero pintará ambas rutas:

Si vamos a "oficina", se pintan tanto "oficina" como "computadora".
Si vamos a "computadora", también se pinta "oficina".

Esto ocurre porque ambas representan la ruta con nombre category.

Accediendo al parámetro "categoryId"

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.

Conversión a número

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:

Solo se resalta la opción "computadora".
Solo se resalta la opción "oficina".
Solo se resalta la opción "todas".

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 pregunta

¡Comparte conocimiento!

Volver al índice

Regístrate

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

Capítulos

Introducción al curso

Probar Vue rápidamente

Crear nuevo proyecto

IDE y extensiones

Instalar Visual Studio Code