Level 17
You could try this.
public function render()
{
return view('livewire.table', ['members' => compact(collect($this->members->items())]);
}
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>
Please or to participate in this conversation.