Livewire v3 Problem - /livewire/update 404 (Not Found)

Terdapat masalah pada Livewire 3 saat rehydrate. Pastikan kamu menggunakan toArray() untuk hasil yang lebih baik. Render lebih baik daripada collection.

Jadi parsing saja dulu ke array. Karena jika collection langsung di-looping, akan terjadi masalah saat render ulang, seperti error 404. Biasanya, livewire/update tidak bekerja dengan baik.

Contoh:

public function getAccommodation()
{
    $this->accommodations = TdaAccommodation::where('tda_batch_id', $this->batch->id)->get();
}

Saat kamu menghapus satu object misalnya dengan fungsi seperti berikut:

public function remove($id)
{
    $model = Model::findOrFail($id);
    $model->delete();

    $this->getAccommodation();
}

Saat fungsi remove dijalankan, maka akan terjadi error 404. livewire/update tidak ditemukan.

Untuk cara yang lebih baik, gunakan saja array. Lebih tepatnya, di Laravel gunakan fungsi toArray():

$this->accommodations = TdaAccommodation::where('tda_batch_id', $this->batch->id)->get()->toArray();

Dan jangan lupa ubah juga di bagian Blade-nya.

Contoh di Blade

<div>
    <table>
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($accommodations as $accommodation)
                <tr>
                    <td>{{ $accommodation['id'] }}</td>
                    <td>{{ $accommodation['name'] }}</td>
                    <td>
                        <button wire:click="remove({{ $accommodation['id'] }})">Delete</button>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

Penjelasan:

1. Menggunakan toArray(): Hasil query diubah menjadi array agar Livewire tidak mengalami masalah saat melakukan rehydrate. Collection dapat menyebabkan masalah saat render ulang, terutama setelah aksi seperti delete.
2. Penyesuaian di Blade: Karena data sekarang berbentuk array, akses properti objek diubah menjadi array dengan ['key'] dibandingkan ->key.
3. Rehydrate Aman: Dengan menggunakan array, Livewire akan lebih stabil dalam menangani operasi seperti remove karena mengurangi potensi masalah dengan object collection.

Semoga solusi ini membantu mengatasi masalah Anda! 😊