laravel livewire issue with nested routes

Question

So I have a nested route URL as so "/study/2/sites" and in my livewire component, I'm trying to catch the study id so I can use it in my eloquent query. but it doesn't seem to be working.. the code is below

in my sites resource controller I have .

public function index(Study $study)
    {
       return view('sites', compact('study'));
    }

then in sites.blade.php which is the view component i have

@extends('layouts.app')


@section('content')
    @livewire('sites-table', ['$study',$study])
@endsection

then in my livewire component site-table.blade.php i have

    <table
        class="table table-vcenter table-mobile-md card-table">
        <thead>
        <tr>
            <th>Site Number</th>
            <th>Site Name</th>
            <th>Country</th>
            <th>Investigator Name</th>
            <th>Investigator Email</th>
            <th class=""></th>
        </tr>
        </thead>
        <tbody>

        @forelse($sites as $site)
        <tr>
            <td data-label="Name" >
                <div class="d-flex py-1 align-items-center">
                    {{ $site->site_number }}
                </div>
            </td>
            <td data-label="Title" >
                {{$site->site_name}}
            </td>
            <td class="text-muted" data-label="Role" >
                {{ $site->country }}
            </td>
            <td>
                {{ $site->investigator_name }}
            </td>
            <td>
                {{ $site->investigator_email }}

            </td>
            <td></td>
            <td>
                <div class="btn-list flex-nowrap">
                    <a href="#" class="btn">
                        Edit
                    </a>
                    <div class="dropdown">
                        <button class="btn dropdown-toggle align-text-top" data-bs-toggle="dropdown">
                            Actions
                        </button>
                        <div class="dropdown-menu dropdown-menu-end">
                            <a class="dropdown-item" href="#">
                                Action
                            </a>
                            <a class="dropdown-item" href="#">
                                Another action
                            </a>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        @empty
            <tr class="text-center">No available Result</tr>
        @endforelse

        </tbody>


    </table>

        <div class="card w-100">
        <div style="float: right" class="pt-2">
            {{ $sites->links() }}
        </div>
        </div>

</div>

lastly, in my livewire SitesTable controller, i have this

public $study;

   
public function mount(Study $study)

{

    $this->study = $study;

}
   
public function render()
{
        return view('livewire.sites-table',['sites'=>Sites::where('study_id',$this->study)->paginate(9),]);
}

Any idea on what I'm doing wrong?? I need to catch the id of the current study so i can use it and find all the sites that are available under the study

Edited:::

so I ended up doing this

public $study;


public function mount()

{

    $study = \Route::current()->parameter('study');
    $this->study = $study;
}

public function render()
{
        return view('livewire.sites-table',['sites'=>Sites::where('study_id',$this->study)->where(function ($query){
            $query->where('site_number','LIKE','%'.$this->searchData.'%')->orWhere('site_name','LIKE','%'.$this->searchData.'%');
        })->paginate(9),]);

}

which works but i'm sure there must be a better way to achieve this

Answer 1

Try it like this:

Your view:

@livewire('sites-table', ['study' => $study]);

Your Livewire Component:

class SitesTable extends Component
{
    public $study;
    
    // rest of the component goes here.
}