Construir un componente Livewire que muestre una sola pregunta es uno de esos pasos donde Laravel se siente casi mágico. Aquí aprenderás a crear el componente Show, configurar la ruta con route model binding y conectar la vista con la base de datos sin escribir una sola consulta manual.

Este flujo es ideal si estás desarrollando un foro, un sistema de Q&A o cualquier plataforma que necesite vistas individuales por registro.

Cómo se crea el componente Livewire para una pregunta

El primer paso es generar el componente desde la terminal. La convención aquí importa más de lo que parece.

En el minuto [00:25] se ejecuta el comando:

bash php artisan make:livewire Show

La palabra en singular no es capricho. Cuando trabajas con listados (preguntas, hilos, posts) usas plural; cuando trabajas con un único registro, singular. Esa nomenclatura evita confusiones cuando tu proyecto crece y tienes decenas de componentes conviviendo.

¿Por qué usar singular en un componente Livewire? Porque representa una sola entidad. Show trabaja con una pregunta específica, mientras que Index o un listado trabajan con la colección completa.

Cómo configurar la ruta con route model binding

La ruta es donde ocurre la primera parte interesante. En el minuto [00:55] se define el endpoint que recibirá un parámetro para buscar la pregunta automáticamente.

La idea es declarar el parámetro con el nombre exacto de la variable que recibirá el componente. Laravel hace el resto: detecta que esa variable es una entidad (un Model) y ejecuta la consulta a la base de datos por ti.

Esto se llama route model binding implícito y elimina la necesidad de escribir consultas manuales tipo Question::find($id).

Pasos clave para que funcione:

• Declarar el parámetro en la ruta con el mismo nombre que la propiedad del componente.
• Tipar la propiedad con el modelo correspondiente (por ejemplo App\Models\Question).
• Aplicar el middleware de autenticación si la vista lo requiere.
• Asignar un nombre a la ruta para poder referenciarla con el helper route().

Cómo enlazar el listado con la vista individual

Desde el listado de preguntas necesitas un enlace que lleve a cada pregunta. En el minuto [01:45] se muestra cómo construir ese enlace usando Blade y el helper de rutas.

La sintaxis es directa: doble llave, route('nombre.ruta', $parametro). Puedes pasar el ID completo o trabajar con una alternativa más limpia que omita el ID visible y maneje todo a nivel de modelo.

¿Qué es route model binding implícito? Es una funcionalidad de Laravel que convierte el parámetro de la URL en una instancia del modelo automáticamente, ejecutando la consulta a la base de datos sin código adicional.

Reutilizar el diseño existente para ahorrar tiempo

En lugar de escribir el HTML desde cero, se reutiliza la plantilla del listado. Se copia el bloque, se ajustan medidas (la anchura pasa de siete a cuatro) y se eliminan las columnas y efectos que no aplican a una vista individual.

Elementos que se conservan en la vista Show:

• El avatar del usuario que creó la pregunta.
• El título de la pregunta.
• La categoría asociada.
• El nombre del usuario y la fecha.
• El cuerpo o descripción del problema, accedido con {{ $question->body }}.

Una pequeña limpieza visual marca diferencia: eliminar la clase de hover que daba efecto al item del listado, ya que en la vista individual no tiene sentido.

Por qué falla la vista si no tipas el parámetro

Aquí viene lo interesante. En el minuto [04:30] se demuestra qué pasa cuando quitas el type hint del modelo en el método del componente.

Sin el tipo declarado, Laravel interpreta el parámetro como un valor crudo (el número 1, por ejemplo) y no como una entidad. La vista falla porque la variable ya no representa al registro completo, solo al ID.

La lección práctica: mantén la convención de nombres entre la ruta, el parámetro del método y la propiedad tipada del componente. Cuando los tres coinciden, Laravel hace la búsqueda implícita por ti.

¿Qué pasa si el parámetro de la ruta no coincide con la propiedad del componente? Laravel no puede resolver el binding implícito, recibe el valor en bruto y la consulta automática a la base de datos no se ejecuta.

Cómo se renderiza el contenido final

Con el modelo ya inyectado, acceder a sus propiedades en la vista es cuestión de sintaxis Blade. El cuerpo de la pregunta se imprime con {{ $question->body }} y se le aplican clases de utilidad como text-white/60 para el contraste visual.

El resultado: una vista dinámica que cambia según la pregunta visitada, sin lógica adicional en el componente. Puedes navegar entre diferentes preguntas y todo se actualiza solo.

Ahora te toca a ti. Crea tu segundo componente siguiendo esta misma estructura y cuéntame en los comentarios qué entidad elegiste para practicar.