EMIT with One to Many Relationsip Livewire

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');
    }
}

In the 2nd component you are receiving a collection in render, not an array.

Yes you are right about the collection thing. I think when i wanted to share i forgot to change the view from $staff[‘staff_id’] to $staff->staff_id. However the issue i am having is this, I am loading data from another table. When I load the page the first time everything appears to be fine, but when I do a click event only the data from one of the tables change in real time

0

Okay!! I got my issue resolved. From my research, I found this article Laravel Livewire component not refreshing/reloading automatically after refreshing it

**yes Livewire components MUST have a single root element **

Once made my component to be in one root element everything worked.

1 Like

Ohhh those div’s!!! hahhaha