Livewire Livewire > encountered corrupt data when trying to hydrate the > [filter-simulators] component

Question

I making a live wire component for filter products but I have a error on Livewire

<?php

namespace App\Http\Livewire;

use App\Models\Area;
use Livewire\Component;
use App\Models\Simulator;

class FilterSimulators extends Component
{

    public $areas;
    public $simulators;

    public function mount(){
        $this->areas = Area::get();
        $this->simulators = Simulator::orderBy('name', 'desc')->get();
    }

    public function filterByArea($type)
    {
        $this->simulators = Simulator::orderBy('name', 'desc')->get();
    }
    
    public function render()
    {
        return view('livewire.filter-simulators');
    }
}

and the Livewire component

<div>
    <div class="has-text-centered">
        <ul class="list-filter-simulators">
            @foreach ($areas as $area)
                <li class="mx-15">
                    <a href="#" wire:click.prevent="filterByArea('{{ $area->slug }}')" class="text-sm">{{ $area->name }}</a>
                </li>    
            @endforeach
            
        </ul>
    </div>
    <div class="columns is-multiline mt-45">
        @foreach ($simulators as $simulator)
        <div class="column m-15 widget-simulator" style="background-image: url('/img/simulator01.webp')">
            <h4 class="text-white is-size-5 text-bold">{{ $simulator->name }}</h4>
        </div>
        @endforeach
    </div>
</div>

and when I press anchor filterByArea show a popup (I remove logic of filter Eloquent for simplify example)

Livewire\Exceptions\CorruptComponentPayloadException Livewire encountered corrupt data when trying to hydrate the [filter-simulators] component. Ensure that the [name, id, data] of the Livewire component wasn't tampered with between requests.

I search and try to convert $simulators to protecto and add to return view manually but I get the same error, maybe because this is my first day using Live Wire hahaha, and the beginning the component show my all data correctly only when I press a button launch the error, I hope someone can help me :)

Thanks! Regards!

Irfan Irfan · Accepted Answer · 2021-02-03T09:11:05

I have also encountered the same issue before. We can solve this issue by manually passing the collection when rendering the component. To have the filtering option, we can introduce a new variable to enable filtering.

Let's assume that we introduce a variable to store the filter value $filter_area_type

class FilterSimulators extends Component
{

    public $areas;
    public $filter_area_type; 

    public function mount(){
        $this->areas = Area::get();
    }

    public function filterByArea($type)
    {
      $this->filter_by_area = $type;

    }
    
    public function render()
    {
        $simulators = Simulator::query()
                      ->when($this->filter_area_type, fn($q, $type) => $q->where('area',$type))
                      ->orderBy('name', 'desc')->get();

        return view('livewire.filter-simulators',[
           'simulators' => $simulators     
          ]);
    }
}

Note that i have used when which can allow us to conditionally append the where clause to the query.

If we want to reset the filters, we can introduce another function and reset only the $filter_area_type variable as below,

    public function resetFilterArea(){
        $this->reset('filter_area_type');
    }

Livewire Livewire > encountered corrupt data when trying to hydrate the > [filter-simulators] component

1 Answers