laravel-livewirelivewire-3

Wire:Model.live not working if its loaded from a file

I've tried to make some reusable code an put it into a file. In this file there is Wire:Model.live to generate a search and a dropdown to make a pagination. If i put the code direct into the blade file it works as expected. But if I load it from a file indide the blade the search and the pagination has no effect. Have I to do something after loading the file ?

The file livewire:basedata_wines.head-table

<div>
<table class="table table-striped table-hover table-bordered border-success border-2">
    <thead>
        <tr>
            <th class="col-2 align-middle h3" scope="col">{{ session('Head_Table') }}</th>
            <th class="col-3 align-middle h3" scope="col">
                <div>
                    <input type="text" wire:model.live.debounce.1000ms="q" class="form-control"
                        placeholder="Search....">
                </div>
            </th>
            <th class="col-3 text-center" scope="col">
                <div class="form-floating">
                    <select wire:model.live="pagination" class="form-select" id="paginateselect"
                        aria-label="page select">
                        <option value="10">10</option>
                        <option value="20">20</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                    <label for="paginateselect">Results per Page</label>
                </div>
            </th>
            <th class="col-12" scope="col">
                <div class="col-12 d-flex align-items-center justify-content-evenly">
                    <button @click="$dispatch('new-mode')" type="button" class="btn btn-success"
                        data-bs-toggle="modal" data-bs-target="#TerroirProcessingModal">
                        {{ session('Button_Table') }}
                    </button>
                </div>
            </th>
        </tr>
    </thead>
</table>

The blade where all the files are loaded:

<div>
<livewire:basedata-wines.base-data />
<div class="col-12">
    <livewire:basedata-wines.terroirprocessing />
    <div class="border 2px border-success p-2">
      
        <livewire:basedata_wines.head-table />
       
        <table class="table table-striped table-hover table-bordered border-success border-2">
            <div>
                {{ $this->countries->links() }}
            </div>
            <thead>
                <tr class="h5">
                    <th class="col-10" scope="col">Country Name</th>

                    <th class="col-2 text-center" scope="col">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($this->countries as $country)
                    <tr>
                        <td class="h5 align-middle col-7">{{ $country->name }}</td>
                        <td class="text-center btn-group col-12">
                            <div class="col-6 mt-1">
                                <button @click="$dispatch('edit-mode',{id:{{ $country->id }}})" type="button"
                                    class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editgrapeModal">
                                    Edit
                                </button>
                            </div>
                            <div class="col-6 mt-1">
                                <button @click="$dispatch('delete-mode',{id:{{ $country->id }}})" type="button"
                                    class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#editgrapeModal">
                                    Delete
                                </button>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>

        </table>
    </div>
</div>
<livewire:script.fade-alert-script />

<livewire:basedata_wines.head-table /> is to load the file.

The part

<button @click="$dispatch('delete-mode',{id:{{ $country->id }}})" type="button"

works in both options (inside the file and direct in the blade).

Thx for the help, Stephan (still Learning)

Solution

  • It looks like your issue is due to how Livewire components work when included as separate files.

    When you include <livewire:basedata_wines.head-table />, it treats head-table as an independent Livewire component. This means that the properties q (search input) and pagination (dropdown value) are isolated within the head-table component and are not affecting the parent component where your table ($this->countries) resides.

    Possible Fixes:

    1. Move the Code Inside the Main Component (Recommended)

    Since the search and pagination are affecting $this->countries, they should be inside the same Livewire component managing the countries list. Instead of a separate Livewire component, put the search input and dropdown directly inside your main component's view.

    2. Use $this->emit() to Sync the Values

    If you must keep head-table as a separate component, you need to emit events so the parent component can listen for changes.

    Modify head-table Component (head-table.php) Inside the updated() method, emit the values to the parent:

    public function updatedQ()
{
    $this->emit('updateSearch', $this->q);
}

public function updatedPagination()
{
    $this->emit('updatePagination', $this->pagination);
}

    Modify Parent Livewire Component (BaseDataWines.php) In the mount() method, listen for emitted events and update the properties:

    protected $listeners = ['updateSearch' => 'setSearch', 'updatePagination' => 'setPagination'];

public function setSearch($q)
{
    $this->q = $q;
}

public function setPagination($pagination)
{
    $this->pagination = $pagination;
}

    3. Ensure Livewire is Correctly Loading the Component

    Make sure your Livewire component names follow kebab-case, not snake_case. Instead of:

    <livewire:basedata_wines.head-table />

    Use:

    <livewire:basedata-wines.head-table />

    or

    @livewire('basedata-wines.head-table')

    1. Best Fix: Move search and pagination inside the main component.

    2. Alternative: Use $this->emit() to communicate between head-table and the parent component.

    3. Check Component Name: Ensure correct Livewire syntax.