Cómo Editar y Actualizar Registros con Laravel Livewire CRUD Completo Tailwind + MySQL

En este tutorial aprenderás paso a paso cómo editar y actualizar registros utilizando Laravel Livewire. Esta guía forma parte de un CRUD profesional construido con Laravel + Livewire + TailwindCSS + MySQL, donde implementamos un flujo completo sin recargar la página y con validaciones reactivas.

• 🛠 Carga de datos desde la base de datos
• 📌 Edición de registros con Livewire
• ✔ Validaciones técnicas en tiempo real
• ⚡ Actualización sin recargar (AJAX-like)
• 🔄 Componentes reactivos y escalables

En el artículo anterior vimos cómo crear registros (Create). Ahora avanzamos al siguiente nivel del CRUD: la edición y actualización (Update).

📌 1. ¿Por qué usar Livewire para editar registros?

Livewire es ideal para aplicaciones administrativas, módulos ERP, sistemas logísticos o cualquier entorno donde se requiera:

• ✔ Cargar datos dinámicamente
• ✔ Mostrar formularios reactivos
• ✔ Validaciones sin refrescar el navegador
• ✔ Mantener la lógica en PHP sin JavaScript personalizado
• ✔ Integración perfecta con modelos Eloquent

Su capacidad para sincronizar datos entre el frontend y el backend lo convierte en la herramienta perfecta para editar registros de forma rápida y profesional.

📌 2. Componente Livewire para Edición (Update)

A continuación mostramos el componente TransportistaEdit donde se cargan los datos del registro, se validan y se actualizan en la base de datos:

transportista = $transportista;

        $this->tipodocumentos = Tipodocumento::select('id', 'abbreviation')->get();

        $this->tipodocumento_id = $transportista->tipodocumento_id;
        $this->numdoc = $transportista->numdoc;
        $this->nomrazonsocial = $transportista->nomrazonsocial;
        $this->address = $transportista->address;
        $this->nromtc = $transportista->nromtc;
        $this->predeterminado = $transportista->predeterminado;
        $this->state = $transportista->state;
    }

    protected $rules = [
        'tipodocumento_id' => 'required|exists:tipodocumentos,id',
        'numdoc' => 'required|min:8|max:20',
        'nomrazonsocial' => 'required|min:3|max:150',
        'address' => 'required|max:200',
        'nromtc' => 'required|max:20',
        'predeterminado' => 'boolean',
        'state' => 'boolean',
    ];

    public function update()
    {
        $this->validate();

        $this->transportista->update([
            'tipodocumento_id' => $this->tipodocumento_id,
            'numdoc' => $this->numdoc,
            'nomrazonsocial' => $this->nomrazonsocial,
            'address' => $this->address,
            'nromtc' => $this->nromtc,
            'predeterminado' => $this->predeterminado,
            'state' => $this->state,
        ]);

        $this->emit('alert', 'El Transportista se actualizó correctamente');

        return redirect()->route('transportista.list');
    }

    public function render()
    {
        return view('livewire.admin.transportista-edit');
    }
}
?>

Este componente gestiona la carga inicial, las validaciones, la edición y la actualización del registro.

📌 3. Vista del formulario con HTML, TailwindCSS y Livewire

En esta sección construimos la vista del formulario que permite registrar transportistas. Incluye campos dinámicos, validaciones visibles en tiempo real y un diseño claro y profesional usando TailwindCSS junto con el poder reactivo de Livewire.

Cada campo está conectado al componente mediante wire:model, lo que permite una experiencia interactiva sin recargar la página y mostrando los errores conforme el usuario escribe.

<div class="max-w-3xl p-6 mx-auto bg-white rounded shadow">

    <h2 class="mb-4 text-xl font-semibold text-gray-700">
        Crear Transportista
    </h2>

    <!-- Tipo de Documento -->
    <div class="mb-4">
        <x-jet-label value="Tipo Documento" />
        <select wire:model="tipodocumento_id"
                class="w-full h-10 border-gray-300 rounded-md shadow-sm">
            <option value="" disabled>Seleccione</option>
            @foreach ($tipodocumentos as $tipodocumento)
                <option value="{{ $tipodocumento->id }}">
                    {{ $tipodocumento->abbreviation }}
                </option>
            @endforeach
        </select>
        <x-jet-input-error for="tipodocumento_id" />
    </div>

    <!-- Numero Documento -->
    <div class="mb-4">
        <x-jet-label value="Número Documento" />
        <x-jet-input type="text" wire:model="numdoc" class="w-full"/>
        <x-jet-input-error for="numdoc" />
    </div>

    <!-- Razón Social -->
    <div class="mb-4">
        <x-jet-label value="Razón Social" />
        <x-jet-input type="text" wire:model="nomrazonsocial" class="w-full"/>
        <x-jet-input-error for="nomrazonsocial" />
    </div>

    <!-- Dirección -->
    <div class="mb-4">
        <x-jet-label value="Dirección" />
        <x-jet-input type="text" wire:model="address" class="w-full"/>
        <x-jet-input-error for="address" />
    </div>

    <!-- Nro MTC -->
    <div class="mb-4">
        <x-jet-label value="Nro MTC" />
        <x-jet-input type="text" wire:model="nromtc" class="w-full"/>
        <x-jet-input-error for="nromtc" />
    </div>

    <!-- Botón Guardar -->
    <button wire:click="save"
            class="px-4 py-2 font-semibold text-white bg-green-600 rounded hover:bg-green-700">
        Guardar
    </button>

</div>

Gracias al comportamiento reactivo de Livewire, todos los mensajes de error, la selección de datos y las interacciones del formulario se ejecutan sin recargar la página, mejorando la usabilidad y reduciendo el tiempo de desarrollo.

📌 4. Explicación de funciones clave

📌 5. Ventajas de implementar Update con Livewire

• ✔ Interacciones instantáneas sin JavaScript
• ✔ Integración con modelos y reglas de validación de Laravel
• ✔ Formularios reactivos fáciles de mantener
• ✔ Ideal para ERP, sistemas logísticos y paneles administrativos
• ✔ Reduce errores de usuario gracias a validaciones inmediatas

🚀 Conclusión

En este artículo aprendiste cómo editar y actualizar registros en Laravel Livewire utilizando un componente totalmente reactivo, validaciones avanzadas y un diseño limpio con TailwindCSS. Este módulo forma parte del CRUD profesional que estamos construyendo:

• 🟡 Listado con DataTable
• 🟢 Crear (Create)
• 🔵 Editar (Update) ← este artículo
• 🔴 Eliminar (Delete)

Al finalizar tendrás un CRUD moderno, rápido y escalable, listo para producción.

📞 Contáctanos

En Ticom Software somos especialistas en Laravel, PHP, Livewire y Odoo ERP. Desarrollamos sistemas web personalizados y brindamos soporte técnico a empresas.

• 🔗 Web: https://www.ticomsoftware.com
• 📧 Email: info@ticomsoftware.com
• 📱 WhatsApp: +51 996 929 478
• 🔵 Facebook: https://www.facebook.com/ticomperuscrl/
• 📸 Instagram: https://www.instagram.com/ticom.peru/
• 🎵 TikTok: https://www.tiktok.com/@ticomscrl