Filtrar publicaciones por categoría en Livewire es una de esas funciones que transforma un foro estático en una experiencia reactiva. Aquí aprenderás a configurar el filtrado por categorías desde el componente PHP hasta la vista, sumando esta lógica a un buscador ya existente para que tu foro responda al instante.

¿Cómo se configura la propiedad de categorías en el componente?

Todo arranca en la sección PHP del componente. Necesitas declarar una nueva propiedad que va a guardar el ID de la categoría seleccionada. Esa propiedad inicia vacía, y ese detalle es clave: mientras esté vacía, la consulta se comporta como si el filtro no existiera.

Luego creas un método público, que en el ejemplo se llama filtrarPorCategoria, y recibe un parámetro. Su única responsabilidad es asignar el valor recibido a la propiedad de categorías. Sencillo, directo, y suficiente para disparar la reactividad de Livewire [0:30].

¿Qué hace el método filtrarPorCategoria? Recibe el ID de una categoría como parámetro y lo asigna a una propiedad del componente. Ese cambio dispara la nueva consulta automáticamente.

¿Cómo se altera la consulta para incluir el filtro?

La magia ocurre cuando segmentas la consulta en varias líneas. Esa estructura te permite insertar un if condicional antes de ejecutarla. La condición es simple: si la propiedad de categorías tiene algún valor, se agrega un where preguntando por category_id igual al valor almacenado [1:10].

Mientras la propiedad esté vacía, el bloque se ignora. En el momento que reciba un ID, la línea se suma a la consulta y filtra los resultados. Así evitas escribir dos consultas separadas para cubrir ambos escenarios.

• La propiedad inicia vacía, así que la consulta base devuelve todos los registros.
• Al recibir un ID, el if agrega el where y filtra por category_id.
• Al volver a vaciar la propiedad, la consulta regresa a su estado original.

Este patrón te da control total sobre qué filtros se aplican y cuándo, sin duplicar lógica.

¿Cómo se conecta la vista con el método del componente?

Del lado de la vista, trabajas con los enlaces que muestran cada categoría. Colocas un numeral en el href y usas el atributo wire:click.prevent para reaccionar al clic sin recargar la página. Ese prevent es importante: sin él, el navegador intenta seguir el enlace y rompe la experiencia reactiva [2:20].

El valor del atributo es el nombre del método seguido del ID de la categoría entre paréntesis y comillas simples. No pasas el nombre de la categoría, pasas el ID, porque es lo que usará la consulta para filtrar.

Para el enlace de "todos los resultados" haces lo mismo, pero pasas un valor en blanco. Eso resetea la propiedad y devuelve la lista completa.

¿Por qué se usa prevent en wire:click? Porque evita que el navegador recargue la página al hacer clic en un enlace, dejando que Livewire gestione la actualización de forma reactiva.

¿Cómo se combinan el filtro por categoría y el buscador?

La lógica actual hace que ambos filtros se sumen. Si escribes en el buscador, aparecen todos los títulos que contengan ese texto sin importar la categoría. Si además haces clic en una categoría, los criterios se acumulan y la consulta devuelve solo los registros que cumplen las dos condiciones.

Al dejar la categoría en blanco, vuelves a ver todos los elementos que coinciden con el texto buscado. Y al limpiar el buscador, recuperas todos los registros de la categoría seleccionada.

• Buscador activo + categoría vacía: filtra solo por texto.
• Buscador vacío + categoría activa: filtra solo por categoría.
• Ambos activos: aplica los dos filtros simultáneamente.

Esa combinación demuestra el poder de Livewire para construir interfaces reactivas con PHP puro, sin escribir JavaScript adicional. Tu turno: aplica esta configuración en tu foro y cuéntame en los comentarios qué otros filtros te gustaría sumar.