VList: Active Category Item

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”.

Crea una cuenta y continúa aprendiendo 🚀

VList: Active Category Item