Livewire no action (laracast tutorial)

[Nadeem]

What seems to be the problem:
I am currently going the laracast tutorial to build a data-table with livewire. E. g. implementing a dynamic paggination is not working. If I select the pagination from 10 to 15 on the GUI nothing happend.

I am using Laravel 7.5.2 for my project with livewire 1.0.

My steps:

1. Installation require livewire/livewire
2. Added <livewire:styles> at End of my Header and <livewire:scripts> at the end of Body of main main layout blade file. Livewire doc explains to use those tags from laravel 7 and higher on.
3. Created the view countries-table.blade.php. This is how the pagination looks like:
   <div class="col form-inline">
{{__('Rows per Page')}}&nbsp;
<select wire.model="perPage" class="form-control">
<option>10</option>
<option>15</option>
<option>25</option>
</select>
</div>
4. Created the livewire file CountriesTable.php:
   <?php
namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithPagination;

class CountriesTable extends Component
{
use WithPagination;

public $perPage = 10;

public function render()
{
    //return view('livewire.countries-table');
    
    return view('livewire.countries-table', [
        'countries' => \App\Country::paginate($this->perPage),
    ]);
    
}
}

5. Including the livewire blade from #3 in my index.blade.php of countries with the following code:
   @include('livewire.countries-table')

Looks like I forgot or missed something really big. But I just can’t figure it out.

[hortigado]

5. @include('livewire.countries-table')
   What code content it?

[Nadeem]

thats the livewire blade:

    <div class="table-responsive-sm">

        <div class="row mb-2">

            <div class="col-md-3">

                <div class="input-group">

                    <div class="input-group-prepend">

                    <div class="input-group-text bg-white">

                    <i class="fas fa-search fa-sm"></i>

                    </div>

                    </div>

                    <input type="text" class="form-control bg-withe border-1 small" placeholder="{{ __('Search')}}" aria-label="Search" aria-describedby="basic-addon2">

                </div>

            </div>

            <div class="col form-inline">

                {{__('Rows per Page')}}&nbsp;

                <select wire.model="perPage" class="form-control">

                    <option>10</option>

                    <option>15</option>

                    <option>25</option>

                </select>

            </div>

        </div>

        <table class="table table-sm table-bordered"  id="dataTable" width="100%" cellspacing="0">

            <thead>

                <tr>

                    <th><a role="button" href="#">{{ __('Name') }}</a></th>

                    <th><a role="button" href="#">{{ __('ISO 3166-1 Alpha 2') }}</a></th>

                    <th><a role="button" href="#">{{ __('ISO 3166-1 Alpha 3') }}</a></th>

                    <th>{{ __('Actions') }}</th>

                </tr>

            </thead>

            <tbody>

                @forelse ($countries as $country)

                <tr>

                    <!-- <td>{{$country->id}}</td>-->

                    <td class="align-middle">{{$country->name}}</td>

                    <td class="align-middle">{{$country->iso31661alpha2}}</td>

                    <td class="align-middle">{{$country->iso31661alpha3}}</td>

                    <!-- Actions -->

                    <td class="align-middle">

                        <div class="input-group-append">

                            <a href="{{ route('countries.show',$country->id)}}" class="btn btn-outline-primary btn-sm mr-2" data-toggle="tooltip" data-placement="bottom" title="{{ __('Show details') }}">

                                    <i class="fas fa-eye"></i>

                                </a>

                            

                            <a href="{{ route('countries.edit',$country->id)}}" class="btn btn-outline-primary btn-sm mr-2"  data-toggle="tooltip" data-placement="bottom" title="{{ __('Edit record') }}">

                                <i class="fas fa-pen"></i>

                            </a>

                            <form action="{{ route('countries.destroy', $country->id)}}" method="post">

                                @csrf

                                @method('DELETE')

                                <button type="submit" class="btn btn-outline-primary btn-sm" data-toggle="tooltip" data-placement="bottom" title="{{ __('Delete record') }}">

                                    <i class="fas fa-trash-alt"></i>

                                </button>

                            </form>

                        </div>

                    </td>

                </tr>

                @empty

                <tr>

                    <td colspan="4" class="align-middle text-center font-weight-bold bg-light">{{ __('No Data') }}</td>

                </tr>

                @endforelse

            </tbody>

        </table>

    </div>

    <div class="row">

        <div class="col">

            {{ $countries->links() }}

        </div>

        <div class="col text-right text-muted">

        Showing {{ $countries->firstItem() }} to {{ $countries->lastItem() }} out of {{ $countries->total() }} results

        </div>

    </div>

</div>

[Nadeem]

@Nadeem

wire.model=“perPage”

That’s the line where I am connecting the pagination with livewire.

[xxdalexx]

If you didn’t miss it when you copied an pasted here, you are missing an opening <div> at the beginning of your file which would cause livewire not to track anything from here to the end of the file:

    <div class="row">

        <div class="col">

            {{ $countries->links() }}

I don’t think that should’ve broken the whole thing though. Echo out your perPage variable next to your dropdown to see if it’s changing when you change the dropdown. If it doesn’t check your console for an error, if it does, there’s something going on with the pagination. You could also try importing the Country class instead of using \App\ in front of it.

@WallyJ, does this look to be the same issue you were having, and did you find a solution yet?

[Nadeem]

@xxdalexx

If you didn’t miss it when you copied an pasted here, you are missing an opening <div> at the beginning of your file which would cause livewire not to track anything from here to the end of the file:

I have added at the beginning a

and closed it also at the end. But that causes no changes. Also I tried to add a

at beginning without to close it. No changes remain.

@xxdalexx

Echo out your perPage variable next to your dropdown to see if it’s changing when you change the dropdown.

I have done that and this is the error message: Undefined variable: perPage in my blade file.
<div class="col form-inline">
{{__('Rows per Page')}}&nbsp;
<select wire.model="perPage" class="form-control">
<option>10</option>
<option>15</option>
<option>25</option>
</select>
{{$perPage}}
</div>

@xxdalexx

You could also try importing the Country class instead of using \App\ in front of it.

I have done that in my livewire class. That didn’t helped

Do I need some how to connect my Country class with the livewire class CountriesTable?

[Nadeem]

I just changed my render function to
public function render()
{
//return view(‘livewire.countries-table’);
return view(‘livewire.countries-table’, [
‘countries’ => Country::paginate($this->perPage),
]);
}
situation remains same.

[xxdalexx]

I don’t know how I missed this.

@include('livewire.countries-table')
Needs to be
@livewire('livewire.countries-table')

[Nadeem]

Thank you for your feedback.
Just for documentation reasons: I have added the @livewire('livewire.countries-table') in my index.blade.php. THis caused the error message that the component livewire.countries-table does not exist. So I changed it to countries-table only. That worked .

What I have observed now is that use WithPagination; in my livewire class CountriesTable work fine, that means no requests send after page changes. But when I am doing the echo of perPage {{perPage}} in my livewire countries-table blade, then I get the following error message:

Use of undefined constant perPage - assumed ‘perPage’ (this will throw an Error in a future version of PHP)

I did not set that variable as a constant…

[xxdalexx]

With the public properties you define, you can use {{ $this->perPage }} in the view which may get rid of that warning.

[Nadeem]

That worked. And I could figure out that no changes where processed after changing the rows per pages selection.

Initialization:

After change:

Just to trial and error I have changed the initialized value of variable perPage in my livewire class to see what happend. From 10 to 20.

Thats the result:

The perPage value is not used or just overwritten. I assume by the controller class CountryController, which I have implemented before using livewire to have CRUD features:

I didn’t see the connection between my controller CountryController and livewire CountriesTable.

[Nadeem]

Sorry I just checked that the initialization of 20 rows was forwared to the table, but not to the select element.

[Nadeem]

I found the problem!

Instead using the correct syntax: wire:model
I used wire.model
After changing to wire:model it works.

@xxdalexx Thank you for your help!