Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Livewire Counter component
<div class="flex flex-col items-center justify-center">
<div>
<button wire:click="increment" class="bg-green-500 btn">&plus;</button>
<button wire:click="decrement" class="bg-red-500 btn">&minus;</button>
<span class="font-bold ml-4" wire:transition.fade>{{ $count }}</span>
</div>
<div class="mt-16 w-1/2 flex items-center">
<button wire:click="toggle" class="btn bg-purple-500">Show Secret</button>
@if($isOpen)
<span class="ml-4 font-semibold" wire:transition.fade>This was hidden, but now it's shown.</span>
@endif
</div>
</div>
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Counter extends Component
{
public $count = 0;
public $isOpen = false;
public function render()
{
return view('livewire.counter');
}
public function increment()
{
$this->count++;
}
public function decrement()
{
$this->count > 0 && $this->count--;
}
public function toggle()
{
$this->isOpen = !$this->isOpen;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment