Crear un formulario de comentarios reactivo en Laravel Livewire te permite registrar datos en tiempo real sin recargar la página. Aquí aprenderás a conectar inputs con propiedades, validar el contenido y guardar comentarios polimórficos usando wire:model, wire:submit y mass assignment.

¿Cómo conectar un input al backend con wire:model?

El punto de partida es reutilizar el formulario que ya tenías diseñado y enlazarlo con la clase Livewire. La idea es simple: la caja de texto del input necesita comunicarse con una propiedad pública del componente para que cualquier cambio en el navegador se refleje en el servidor.

Para lograrlo, declara una propiedad de tipo string llamada contenido dentro de tu clase. Luego, en la vista blade, agrega el atributo wire:model="contenido" al input. Con eso, el dato viaja automáticamente entre frontend y backend [01:35].

¿Qué hace wire:model en Livewire? Vincula un input HTML con una propiedad pública del componente PHP, sincronizando el valor en ambos lados sin necesidad de escribir JavaScript.

¿Cómo cancelar el formulario sin recargar?

El botón de cancelar reutiliza el método toggle, que actúa como una palanca. Cambia el valor de la variable showForm de false a true y viceversa, mostrando u ocultando el formulario según convenga.

• Click en agregar comentario: la variable pasa a true y el formulario aparece.
• Click en cancelar: la variable vuelve a false y el formulario se oculta.
• Todo ocurre sin recargar la página gracias a la reactividad de Livewire.

¿Cómo enviar el formulario y disparar un método add?

Cuando el usuario presiona comentar, necesitas que se ejecute un método del componente. Para eso usa wire:submit="add" en la etiqueta <form>. Si el método no existe, Livewire te avisa con un error claro indicando que falta crearlo [02:30].

Dentro del método add, lo primero es validar. El contenido debe ser requerido, de tipo string y con un máximo de 255 caracteres. Esta validación protege la base de datos de entradas vacías o demasiado largas.

php public function add() { $this->validate([ 'contenido' => 'required|string|max:255', ]);

$this->commentable->comentarios()->create([
    'contenido' => $this->contenido,
    'user_id' => 20,
]);

$this->reset(['contenido', 'showForm']);

}

El user_id está fijo en 20 mientras no exista el sistema de inicio de sesión, pero más adelante se obtendrá del usuario autenticado.

¿Por qué aparece el error de mass assignment?

Al intentar guardar el comentario por primera vez, Laravel lanza un error porque estás enviando una colección de datos al modelo y no le has dicho cuáles campos puede aceptar. Esto se llama mass assignment y funciona como una capa de seguridad.

¿Qué es el fillable en Laravel? Es una propiedad del modelo Eloquent que lista los campos permitidos para asignación masiva. Sin ella, Laravel bloquea la inserción para evitar que campos sensibles se modifiquen accidentalmente.

Para solucionarlo, abre la entidad Comentario y agrega los campos permitidos:

php protected $fillable = ['contenido', 'user_id'];

Con eso, el comentario se guarda correctamente y la relación polimórfica funciona: un comentario puede pertenecer a una pregunta o a una respuesta sin importar el tipo del modelo padre.

¿Cómo limpiar el formulario después de guardar?

Una vez guardado el comentario, el input debe quedar vacío y el formulario ocultarse. Puedes hacerlo manualmente reasignando valores, pero Livewire ofrece el método reset que es mucho más limpio.

• $this->reset('contenido') deja la propiedad en su valor inicial.
• $this->reset(['contenido', 'showForm']) resetea ambas a la vez.
• El input se vacía y el formulario se cierra en el mismo paso.

Al probarlo en el navegador, escribes ABC, presionas comentar y el registro aparece en la tabla de comentarios sin que la página recargue. Si revisas la base de datos ordenando de manera descendente, verás que un comentario pertenece a la pregunta con ID 2 y otro a la respuesta con ID 38, confirmando que la relación polimórfica funciona correctamente [05:15].

¿Qué ventaja te da Livewire frente a JavaScript puro?

Livewire te entrega el poder de JavaScript escribiendo solo PHP. No necesitas configurar fetch, axios ni manejar estados manualmente. Las propiedades públicas del componente actúan como el estado y los métodos como los manejadores de eventos.

• Reactividad sin escribir una línea de JS.
• Validaciones nativas de Laravel reutilizadas en el frontend.
• Reseteo de variables con un solo método.

Ahora te toca a ti: haz que tu formulario funcione y prueba el componente dentro del foro y del blog. ¿Qué validaciones extra le agregarías?