ทำความรู้จักกับ Livewire กัน
composer require livewire/livewire<html>
<head>
@livewireStyles
</head>
<body>
<!-- เนื้อหาเว็บไซต์ -->
@livewireScripts
</body>
</html>Last updated
php artisan make:livewire ShowCounternamespace App\Http\Livewire;
use Livewire\Component;
class ShowCounter extends Component
{
public $count = 0;
public function increment()
{
$this->count++;
}
public function decrement()
{
$this->count--;
}
public function render()
{
return view('livewire.show-counter');
}
}<div>
<div class="text-center">
<h2 class="text-xl font-bold">Counter: {{ $count }}</h2>
<div class="mt-4">
<button wire:click="increment"
class="px-4 py-2 bg-blue-500 text-white rounded">
+
</button>
<button wire:click="decrement"
class="px-4 py-2 bg-red-500 text-white rounded">
-
</button>
</div>
</div>
</div>class ShowPosts extends Component
{
public $search = '';
public $sortField = 'title';
public function updatedSearch()
{
// ทำงานอัตโนมัติเมื่อ $search มีการเปลี่ยนแปลง
}
public function render()
{
return view('livewire.show-posts', [
'posts' => Post::search($this->search)
->orderBy($this->sortField)
->paginate(10)
]);
}
}<div>
<input type="text" wire:model="search" placeholder="ค้นหาโพสต์...">
<select wire:model="sortField">
<option value="title">เรียงตามชื่อ</option>
<option value="created_at">เรียงตามวันที่</option>
</select>
<div class="mt-4">
@foreach($posts as $post)
<div class="mb-4">
<h3>{{ $post->title }}</h3>
<p>{{ $post->excerpt }}</p>
</div>
@endforeach
</div>
</div><!-- การจัดการ Events พื้นฐาน -->
<button wire:click="save">บันทึก</button>
<input wire:keydown.enter="search">
<!-- การส่งพารามิเตอร์ -->
<button wire:click="delete({{ $post->id }})">ลบ</button>
<!-- การยืนยันก่อนดำเนินการ -->
<button wire:click="delete" wire:confirm="คุณแน่ใจหรือไม่?">ลบ</button><div>
<button wire:click="savePost">
<span wire:loading.remove>บันทึก</span>
<span wire:loading>กำลังบันทึก...</span>
</button>
<!-- แสดง loading spinner เฉพาะการทำงานบางอย่าง -->
<div wire:loading wire:target="savePost">
<svg class="animate-spin h-5 w-5"><!-- SVG spinner --></svg>
</div>
</div>