I have two livewire components. One of the components is the Search component which allows me to search for a record. When I click on a record the record will emit the Staff_id which I am using to load the details of the staff. Staff details are been retrieved from two tables. However, the data from the relationship isn’t loading. Anybody with an idea of what I am doing wrong?
Steps to Reproduce:
Are you using the latest version of Livewire: Yes
Do you have any screenshots or code examples:
<div>
<div class="search_button mb-4 mt-4">
<input type="text" class="form-input form-control" placeholder="Search Staff..."
wire:model.debounce.800ms="query" autocomplete="off" />
</div>
<div class="pay_list mt-1">
<table class="table table-hover">
<tbody>
@if (!empty($staffs))
@foreach ($staffs as $staff)
<tr>
<td wire:click="$emit('selectedStaff', '{{ $staff['staff_id'] }}')">
{{ $staff['first_name'] . ' ' . $staff['last_name'] }} </td>
</tr>
@endforeach
@else
<tr>
<td> <a href="#">No Search Found</a> </td>
</tr>
@endif
</tbody>
</table>
</div>
</div>
**Class of the View Above**
<?php
namespace App\Http\Livewire;
use App\Models\Staffrecord;
use Livewire\Component;
class StaffSearchBar extends Component
{
public $staffs;
public $query;
public function mount()
{
$this->resetsearch();
}
public function resetsearch()
{
$this->query = '';
$this->staffs = [];
}
public function render()
{
$this->staffs = Staffrecord::where('first_name', 'like', '%' . $this->query . '%')
->orWhere('last_name', 'like', '%' . $this->query . '%')
->orWhere('staff_id', 'like', '%' . $this->query . '%')
->orderBy('first_name', 'desc')
->get()->toArray();
return view('livewire.staff-search-bar');
}
}
**VIEW OF THE SECOND COMPONENT**
@foreach ($staffs as $staff)
<div class="col-sm-6">
<div class="row">
<div class="col-sm-2">
<img src="{{ asset('images/user.png') }}" alt="">
</div>
<div class="col-sm-6">
<p><strong>Name: </strong>{{ $staff['first_name'] . ' ' . $staff['last_name'] }}</p>
<p><strong>Staff ID: </strong>{{ $staff['staff_id'] }}</p>
<p><strong>Gl/S: </strong> {{ $staff['grade_level_id'] }}</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">
{{ $staff['bankaccount']->bank_name }}
</div>
</div>
@endforeach
<div class="col-sm-2">
<b><a name="" id="" class="btn btn-primary pay_btn" href="#" role="button"> Generate Slip</a></b>
</div>
**CLASS OF THE SECOND COMPONENT**
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Staffrecord;
class StaffDetailsPayslip extends Component
{
public $staff_id = 'ST-001';
public $staffs;
protected $listeners = ['selectedStaff'];
public function selectedStaff($staff_id)
{
$this->staff_id = $staff_id;
}
public function render()
{
$this->staffs = Staffrecord::with('bankaccount')->where('staff_id', $this->staff_id)
->get();
return view('livewire.staff-details-payslip');
}
}