Guardar comentarios en tiempo real con Livewire

Contenido del curso

Configuración

Diseño de un foro

Livewire

Optimización

CRUD

Detalles finales

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:20

Guardar comentarios en tiempo real con Livewire

Curso de Laravel

Clase 12 de 25

Clase 12 / 25

Recursos

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?

Francisco Andres Ortega Florez

Hace un año

Tuve un problema al momento de guardar los comentarios ya que estos no se visualizaban correctamente, una posible solución a esto es lo siguiente:

app\Livewire\Comment.php

public function render()
{
    return view('livewire.comment', [
        'comments' => $this->commentable->comments()->latest()->get(),
    ]);
}

Robert Rincon

Hace un año

Creo que tuve el mismo problema que tu, para solucion hice lo siguiente

Muestra correctamente:

return view('livewire.comment',[
            'comments' => $this->commentable->comments
        ]);

Hay que tomar en cuenta que no es una funcion lo que se quiere tomar de comments, que fue mi error anterior.

No muestra correctamente:

return view('livewire.comment',[
            'comments' => $this->commentable->comments()
        ]);

Kenneth Angulo L

Hace un año

comments (propiedad) → obtiene los registros. Esta es la forma correcta para pasar los datos a la vista.
comments() (método) → devuelve el builder, no los registros. Esta forma la podemos usar cuando necesitamos hacer modificaciones sobre la consulta, como por ejemplo ordenar de alguna manera espeifica, filtrar datos o a lgo asi.

Configuración

Desarrollo de foro interactivo con Laravel y LiveWire

Instalación de Laravel con kit de inicio LiveWire

Creación de modelos, migraciones y factories en Laravel

Creación de datos falsos para pruebas con factories y seeders

Diseño de un foro

Flujo completo de Laravel: ruta, controlador, modelo y vista

Diseño home en Laravel con Tailwind CSS

Desarrollo de página de detalles con rutas dinámicas en Laravel

Creación de componentes Blade para plantillas reutilizables en Laravel

Pregunta con respuestas dinámicas en Laravel

Relaciones polimorfas para comentarios en Laravel

Livewire

Primer componente Livewire con comentarios

Guardar comentarios en tiempo real con Livewire

Formulario para responder preguntas en Laravel

Botón de corazón reactivo con Livewire

Optimización

Refactorización de componentes Livewire y optimización con Traits

Eliminar preguntas y datos huérfanos en Laravel

Eliminación en cascada desde el modelo Laravel

Cómo eliminar el problema N+1 en Laravel

CRUD

Cómo crear el index del foro en Laravel

Crear preguntas en un foro con Laravel

Formulario de edición con rutas edit y update

Detalles finales

Control de acceso con middleware en Laravel

Políticas de acceso en Laravel con Blade

Separación de responsabilidades en controladores Laravel

URLs limpias con slugs en Laravel

Guardar comentarios en tiempo real con Livewire