Dynamic Data คือข้อมูลที่สามารถเปลี่ยนแปลงได้ตามการโต้ตอบของผู้ใช้หรือการทำงานของระบบ เช่น การกรอกฟอร์ม การเลือกตัวเลือก หรือการดึงข้อมูลแบบ Real-Time Livewire ทำให้การจัดการ Dynamic Data เป็นเรื่องง่ายผ่านการใช้ Two-Way Data Binding และการเรียกฟังก์ชันแบบ Dynamic เพื่อจัดการข้อมูล

การทำงานกับ Dynamic Data มีความสำคัญในการสร้างแอปพลิเคชันที่ต้องการความโต้ตอบแบบทันที เช่น การกรองข้อมูล การคำนวณ หรือการอัปเดตส่วนต่าง ๆ ของหน้าเว็บโดยไม่ต้องโหลดใหม่

ตัวอย่างการใช้งาน Dynamic Data

การสร้าง Component สร้าง Component ชื่อ DynamicList เพื่อแสดงรายการข้อมูลที่ผู้ใช้สามารถเพิ่มหรือกรองได้:

php artisan make:livewire DynamicList

จัดการข้อมูลใน Component (DynamicList.php) เปิดไฟล์ DynamicList.php และสร้างตัวแปร $items สำหรับเก็บข้อมูล และ $search สำหรับเก็บคำค้นหาที่ผู้ใช้ป้อน:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class DynamicList extends Component
{
    public $items = ['Apple', 'Banana', 'Orange'];
    public $search = '';

    public function addItem($item)
    {
        if (!empty($item)) {
            $this->items[] = $item;
        }
    }

    public function getFilteredItemsProperty()
    {
        return collect($this->items)->filter(function ($item) {
            return str_contains(strtolower($item), strtolower($this->search));
        })->values()->toArray();
    }

    public function render()
    {
        return view('livewire.dynamic-list');
    }
}

• $items เก็บรายการข้อมูล
• $search เก็บคำค้นหาจากผู้ใช้
• getFilteredItemsProperty ใช้ฟังก์ชัน Computed Property เพื่อกรองข้อมูลตามคำค้นหา

สร้าง View สำหรับแสดงข้อมูล (dynamic-list.blade.php) ในไฟล์ dynamic-list.blade.php เขียน HTML เพื่อแสดงข้อมูลแบบ Dynamic และเพิ่มฟอร์มสำหรับการกรอกข้อมูลใหม่:

<div>
    <h2>Dynamic List</h2>

    <!-- ค้นหา -->
    <input type="text" wire:model="search" placeholder="Search items...">

    <!-- แสดงรายการ -->
    <ul>
        @foreach ($this->filteredItems as $item)
            <li>{{ $item }}</li>
        @endforeach
    </ul>

    <!-- เพิ่มรายการ -->
    <input type="text" id="newItem" placeholder="Add new item...">
    <button wire:click="addItem(document.getElementById('newItem').value)">Add</button>
</div>

• wire:model="search" เชื่อมข้อมูลคำค้นหากับตัวแปร $search แบบ Two-Way Data Binding
• wire:click เรียกฟังก์ชัน addItem เพื่อเพิ่มรายการใหม่
• ใช้ $this->filteredItems สำหรับแสดงรายการที่กรองแล้ว

การแสดงผลใน Blade Template เพิ่ม Component นี้ใน Blade Template เช่น home.blade.php:

@livewire('dynamic-list')

1. ผลลัพธ์ที่ได้
   • ผู้ใช้สามารถกรอกคำค้นหาในช่อง Search items... เพื่อกรองรายการ
   • ผู้ใช้สามารถเพิ่มรายการใหม่ในช่อง Add new item... และกดปุ่ม “Add” เพื่อเพิ่มรายการใหม่ใน $items
   • รายการจะอัปเดตแบบทันทีโดยไม่ต้องโหลดหน้าใหม่

การนำไปใช้งาน

การทำงานกับ Dynamic Data เหมาะสำหรับ:

• ระบบค้นหาและกรองข้อมูล เช่น รายการสินค้า รายการผู้ใช้
• การจัดการรายการ เช่น การเพิ่ม ลบ หรือแก้ไขข้อมูล
• การสร้างส่วนติดต่อผู้ใช้ที่ตอบสนองแบบ Real-Time เช่น Dashboard

Livewire ช่วยให้การจัดการข้อมูลที่เปลี่ยนแปลงได้ง่ายขึ้น และลดความซับซ้อนของการใช้ JavaScript ในการควบคุม UI

ประโยชน์ของ Dynamic Data ใน Livewire

• ลดการโหลดหน้าใหม่ ทำให้ผู้ใช้ได้รับประสบการณ์ที่ราบรื่น
• ง่ายต่อการจัดการข้อมูลแบบ Real-Time
• ช่วยให้โค้ดมีความกระชับและอ่านง่าย