Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Opción: Todas las categorías
Veamos cómo agregar una opción "Todas" a nuestra lista de categorías. Así mismo, cómo mantener el link de Home activo para cuando se apliquen filtros.
Implementación de la opción "Todas" en Categorías
En la lección anterior, terminamos de implementar nuestras rutas por categorías y nuestro filtro funciona correctamente.
Sin embargo, en el lado izquierdo no se muestra qué categoría está seleccionada y tampoco hay una opción de "Todos" para ver todas las categorías. Vamos a implementar esto.
Modificación en "CategoryList"
Nos dirigimos a nuestro componente CategoryList, donde actualmente tenemos dos categorías en nuestro arreglo de categories.
Si agregamos una categoría más llamada "Todos", podríamos hacerlo agregando un objeto más al inicio del arreglo. Sin embargo, ver todas las categorías no debería considerarse una nueva categoría.
En lugar de usar v-for para pintar la categoría "Todos", la escribiremos directamente en nuestro template como una opción especial. No existe una categoría "Todos" como tal, sino que la ausencia de una categoría representa a todas.
Dentro del template, agregamos un v-list-item.title con la opción "Todas".
Para que se vea igual que el resto, le añadimos el atributo link y asociamos un evento click al list-item.
Implementación de "clearCategory"
El evento de clic llamará a selectCategory, que hace un router.push para cambiar la ruta a category.
En este caso, en lugar de selectCategory, crearemos un nuevo método llamado clearCategory para limpiar la categoría seleccionada.
Este método no necesita argumentos porque no estamos escogiendo una categoría.
Dentro, hacemos un this.$router.push, pasando un objeto que indica la ruta a la que queremos ir.
En este caso, la ruta es home, que no lleva parámetros.
Resultado hasta este punto
- Podemos ver la categoría con
id:1. - Podemos ver la categoría con
id:2. - Podemos ver todas las categorías.
- El enlace "Todas" nos lleva a
home, mostrando todas las categorías.
Corrección del botón "Home"
Al seleccionar "Oficina", la ruta home en la parte superior se desmarca.
Esto sucede porque home solo se pinta cuando estamos en la ruta raíz. Al cambiar a "Computadora" u "Oficina", se desmarca.
Para corregirlo, vamos a nuestro toolBar, donde hay una condición para que el botón "Home" esté activo si route.name es igual a home. Modificamos esta condición para que también se mantenga activo si route.name es category.
De esta manera, el botón "Home" estará pintado tanto en home como en category, incluyendo "Oficina" y "Computadora".
Pintar la opción seleccionada
Queremos que "Todas" se pinte cuando estamos en home, pero también que "Oficina" y "Computadora" se pinten cuando corresponda. ¿Cómo podemos lograr esto?
Para ello, modificamos la lógica de selección dentro del template, asegurándonos de que el estado visual de los botones refleje correctamente la categoría activa.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
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?
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript