Livewire Counter

[Frank K Hosaka]

Eu tentei estudar a paginação no Livewire com a Gemini, mas não consegui.

Decidi usar o velho motor de busca do Google, e acabei entrando nesse tutorial: https://livewire.laravel.com/docs/quickstart

Ele tenta explicar o que é LiveWire e mostra um código exemplo para mostrar como ele funciona.

Só que ele não funcionou. E assim eu desisti do Laravel milhares de vezes, por não conseguir encontrar nenhum tutorial que funcionasse.

Mas, nesse ano as coisas são diferentes. Eu consegui executar o tutorial do Chirp com o LiveWire, ele não é fácil de entender; mesmo assim, tentei usar o princípio científico da tentativa e erro e tentei fazer o counter funcionar. E eu consegui!

routes > web.php
<?php
use Illuminate\Support\Facades\Route;

Route::middleware(['auth', 'verified'])->group(function ()
{
    Route::view('counter','counter');
});

resources > views > counter.blade.php
<x-app-layout>
    <div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8">
        <livewire:counter />
    </div>
</x-app-layout>

resources > views > livewire > counter.blade.php
<?php
use Livewire\Volt\Component;

new class extends Component
{
    public $count=1;
    function increment(){$this->count++;}
    function decrement(){$this->count--;}
}
?>
<div>
    <h1>{{$count}}</h1>
    <button wire:click="increment">+</button>
    <button wire:click="decrement">-</button>
</div>

 

[Frank K Hosaka]

Baseado no código do counter, tentei montar o pagination. Recebi dezenas de mensagens de erro, e acabou prevalecendo a minha improvisação. Não tenho a menor ideia como usar o Livewire. Para piorar, eu não consegui utilizar o CSS Tailwinds e nem o CSS convencional. Isso é muito chato:

routes > web.php
<?php
use Illuminate\Support\Facades\Route;

Route::middleware(['auth', 'verified'])->group(function ()
{
    Route::view('counter','counter');
    Route::view('pagination','pagination');
});

resources > views > pagination.blade.php
<x-app-layout>
    <div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8">
        <livewire:pagination />
    </div>
</x-app-layout>

resources > views > livewire > pagination.blade.php
<?php
namespace App\Http\Livewire;
use Livewire\Volt\Component;
use Livewire\WithPagination;
use App\Models\tbprod;

new class extends Component
{   
    public $page=1;
    public $last_page;
    public $paginas;
    public $produtos;
    use WithPagination;

    function mount()
    {
        $this->paginas=tbprod::paginate(10,['*'],'page',$this->page)->toArray();
        $this->last_page=$this->paginas['last_page'];
        $this->produtos=$this->paginas['data'];
    }

    function increment()
    {
        if($this->page<$this->last_page)
        {
            $this->page++;
            return $this->mount();
        }
    }

    function decrement()
    {
        if($this->page>1)
        {
            $this->page--;
            return $this->mount();
        }
    }

    
}
?>
<div>
    @foreach($produtos as $produto)
    <div> {{$produto['codprod']}} {{$produto['prod']}} </div>
    @endforeach
    <p><h1>Página Atual: {{$page}}</h1></p>
    <button wire:click="increment">
        Próximo
    </button>
    <button wire:click="decrement">
        Anterior
    </button>
</div>

Em tempo, esqueci de executar npm run dev.

Editado Outubro 1 por Frank K Hosaka