Opción: Todas las categorías

En la lección anterior hemos terminado de implementar nuestras rutas por categorías y tenemos un filtro que funciona correctamente. Sin embargo, aquí en el lado izquierdo no se está mostrando qué categoría está seleccionada y tampoco estamos viendo una opción de “todos” para ver todas las categorías Entonces vamos a implementar ello. Vamos a dirigirnos primero a nuestro componente “CategoryList” y aquí vemos que tenemos dos categorías en nuestro arreglo de categories. Si nosotros agregamos una categoría más llamada a “todos”, podríamos hacerlo funcionar agregando un objeto más al inicio del arreglo de categorías. Sin embargo, ver todas las categorías no se debería considerar como una nueva categoría. Por lo tanto, en vez de usar esta directiva for para pintar la categoría, “todos” vamos a escribirlo directamente sobre nuestro template porque se trata de una opción especial. No existe una categoría “todos” como tal, sino que la ausencia de categoría representa a todas las categorías. Dentro, lo que vamos a poner es un “v-list-item.title” y aquí vamos a poner “todas” haciendo referencia a todas las categorías. Para que se vea igual que el resto de las categorías, le vamos a poner aquí un atributo “link” tal como se ve acá y vamos a asociarle un evento de clic a nuestro list Item. De esta manera vamos a llamar a "selectCategory". "electCategory" lo que hace es un "router.push", es decir, se está cambiando la ruta para dirigirnos a la ruta que tiene como nombre "category". En nuestro caso, nosotros vamos a llamar otro método, en este caso que se va a llamar "clearCategory", porque vamos a limpiar la categoría seleccionada. Entonces vamos a agregar un método nuevo, un método nuevo que se va a llamar "clearCategory". No necesitamos ningún argumento porque no se está escogiendo ninguna categoría. Sin embargo, aquí haremos un “this.$router.push” y vamos a pasar aquí un objeto indicando a qué ruta queremos ir. En este caso, queremos ir a la ruta que tiene como nombre “home”. La ruta “home” no lleva parámetros. Entonces hasta aquí vemos que ocurre. Estamos viendo la categoría con con “id:1” uno. Podemos ver la categoría con “id:2” y también podemos ver todas las categorías. Como vemos, este enlace nos lleva al “home” y por lo tanto terminamos viendo todas las categorías. Hay un detalle aquí que debemos tener en cuenta cuando nosotros seleccionamos "oficina", la ruta "home" en la parte superior se desmarca. ¿Por qué? Porque esa ruta "home" solo se está pintando cuando estamos en la ruta raíz. Si vamos a "computadora", si vamos "oficina" se desmarca. ¿De qué manera podemos hacer que este botón siga pintado también para las rutas de las categorías? Bueno, para ello tenemos que dirigirnos a nuestro toolBar. Aquí nosotros tenemos una condición. Este botón "home" “estará activo”, nos dice, si es que “route.name” es igual a “home”, pero vamos a ponerle uno porque sí, es igual a "home", pero también nos interesa si es que es igual a "category". Entonces, para ambos casos estará pintado el botón de "home", tanto para "oficina" como para "computadora" como para todas, que es la ruta raíz. Lo siguiente que queremos es que este botón de “todas” se pinte cuando estamos en "home", pero también queremos que "oficina" se pinte o que "computadora" se pinte. ¿Cómo podemos lograr ello?

¡Suscríbete y continúa aprendiendo!

Opción: Todas las categorías