croftCoder's avatar

Laravel Livewire Nested Components

trying to nest a livewire component into another but getting the error: Livewire component's [table] public property [members] must be of type: [numeric, string, array, null, or boolean]. Only protected or private properties can be set as other types because JavaScript doesn't need to access them.

LiveTable Livewire Component

class LiveTable extends Component
{
    use WithPagination;

    public $query = '';
    public $paginate = 25;

    public function render()
    {
        return view('livewire.live-table', [
            'members' => Member::with([
                'contact',
            ])->search(trim($this->query))->paginate($this->paginate),
        ]);
    }
}

live-table.blade.php

<div>
    <div>
        <form>
            <div>
                <input type="text" name="query" id="search" wire:model.debounce.500ms="query" placeholder="search term" />
            </div>
            <div class="flex items-center">
                <label for="paginate">Per Page:</label>
                <select name="paginate" id="paginate" wire:model="paginate" >
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
            </div>
        </form>
    </div>
    
    <livewire:table :members="$members" />
</div>

Table Livewire Component

class Table extends Component
{
    use WithPagination;

    public $members;

    public function render()
    {
        return view('livewire.table', ['members' => $this->members]);
    }
}

table.blade.php

<div>
    @if(count($members) > 0)
    <table>
        <thead>
            <tr>Fullname</tr>
        </thead>
        <tbody>
            @foreach($members as $member)
            <tr>{{ $member->lastname }} {{ $member->firstname }}</tr>
            @endforeach
        </tbody>
    </table>

    {{-- do pagination if needed --}}
    @if($members instanceof \Illuminate\Pagination\LengthAwarePaginator)
    <div>
        <div>
            {{ $members->links() }}
        </div>
    </div>
    @endif
    @else
    <p>nothing found</p>
    @endif
</div>
0 likes
1 reply
putera's avatar

You could try this.

public function render()
{
        return view('livewire.table', ['members' => compact(collect($this->members->items())]);
 }

Please or to participate in this conversation.