# Livewire Laravel Livewire เป็นเฟรมเวิร์กที่ช่วยให้สามารถพัฒนาเว็บแอปพลิเคชันที่มีการตอบสนองแบบเรียลไทม์ได้โดยไม่ต้องพึ่งพา JavaScript มากมาย Livewire ทำหน้าที่เชื่อมต่อระหว่างส่วนของ PHP กับส่วนของ JavaScript ให้ทำงานร่วมกันอย่างมีประสิทธิภาพ ช่วยให้การพัฒนาให้สะดวกสบายและยืดหยุ่นมากขึ้น ซึ่งนักพัฒนาสามารถใช้คำสั่งที่คุ้นเคยใน Laravel และสามารถปรับปรุง UX/UI ของหน้าเว็บได้อย่างรวดเร็ว ทำให้การพัฒนาเว็บแอปพลิเคชันกับ Laravel มีประสิทธิภาพมากยิ่งขึ้น ## การติดตั้ง ก่อนเริ่มใช้งาน Livewire คุณจำเป็นต้องติดตั้งแพ็คเกจผ่าน Composer: ```bash composer require livewire/livewire ``` จากนั้นเพิ่ม Livewire scripts และ styles ในเทมเพลต Blade หลักของคุณ: ```html @livewireStyles @livewireScripts ``` ## การสร้าง Component พื้นฐาน Livewire components ประกอบด้วยไฟล์ PHP class และ Blade template ที่ทำงานร่วมกัน สร้าง component ใหม่ด้วยคำสั่ง: ```bash php artisan make:livewire ShowCounter ``` คำสั่งนี้จะสร้างไฟล์ 2 ไฟล์: * `app/Http/Livewire/ShowCounter.php` - Class component * `resources/views/livewire/show-counter.blade.php` - Template view ### ตัวอย่าง Component Counter ```php namespace 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'); } } ``` Template สำหรับ counter component: ```html

Counter: {{ $count }}

``` ## การใช้งาน Properties และ Methods Livewire properties สามารถเข้าถึงได้โดยตรงจาก template และอัพเดทแบบ real-time: ```php 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) ]); } } ``` Template ที่เกี่ยวข้อง: ```html
@foreach($posts as $post)

{{ $post->title }}

{{ $post->excerpt }}

@endforeach
``` ## Events และ Actions Livewire รองรับ events หลายรูปแบบสำหรับการโต้ตอบกับผู้ใช้: ```html ``` ## Loading States จัดการสถานะ loading เพื่อปรับปรุง UX: ```html
``` การใช้งาน Livewire ช่วยให้คุณสร้างส่วนติดต่อผู้ใช้แบบ dynamic โดยใช้ PHP เป็นหลัก ลดความซับซ้อนของ JavaScript และเพิ่มประสิทธิภาพในการพัฒนา --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://blog.farzai.com/parsilver/laravel/livewire.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.