1. ความเข้าใจเกี่ยวกับ x-data

x-data ใน Alpine.js เป็นคำสั่งที่ใช้สำหรับกำหนด State ของ Component โดยข้อมูลใน x-data จะถูกจัดเก็บในรูปแบบ Object และสามารถเข้าถึงหรือปรับเปลี่ยนได้ผ่านคำสั่งอื่นๆ เช่น x-text, x-bind หรือ Event Binding

• State: คือตัวแปรที่ใช้เก็บข้อมูลของ Component
• รูปแบบ: x-data="{ key: value }"

2. การตั้งค่า State เริ่มต้นด้วย x-data

ตัวอย่างพื้นฐาน:

<div x-data="{ message: 'Hello, World!' }">
    <h1 x-text="message"></h1>
</div>

การทำงาน:

• x-data="{ message: 'Hello, World!' }": กำหนดค่าเริ่มต้นของ State message เป็น “Hello, World!”
• x-text="message": แสดงข้อความจากตัวแปร message

เมื่อโหลดหน้าเว็บ ข้อความ “Hello, World!” จะแสดงใน <h1>

3. การปรับเปลี่ยนค่า State ด้วย Event

เพิ่มปุ่มเพื่อเปลี่ยนค่าของ State:

<div x-data="{ message: 'Hello, World!' }">
    <h1 x-text="message"></h1>
    <button @click="message = 'Hello, Alpine!'">Change Message</button>
</div>

การทำงาน:

• เมื่อคลิกปุ่ม ค่า message จะเปลี่ยนเป็น “Hello, Alpine!” และข้อความใน <h1> จะอัปเดตทันที

4. ใช้ State หลายค่าใน x-data

ตัวอย่างการใช้งานหลายตัวแปร:

<div x-data="{ message: 'Hello, World!', count: 0 }">
    <h1 x-text="message"></h1>
    <h2 x-text="'Count: ' + count"></h2>
    <button @click="count++">Increase Count</button>
</div>

การทำงาน:

• message และ count เป็นตัวแปรใน State เดียวกัน
• เมื่อคลิกปุ่ม ค่า count จะเพิ่มขึ้นทีละ 1

5. การใช้ฟังก์ชันภายใน x-data

สามารถกำหนดฟังก์ชันใน x-data ได้ เช่น:

<div x-data="{ message: 'Hello, World!', changeMessage() { this.message = 'Hello, Function!' } }">
    <h1 x-text="message"></h1>
    <button @click="changeMessage()">Change Message</button>
</div>

การทำงาน:

• ฟังก์ชัน changeMessage จะเปลี่ยนค่า message เมื่อถูกเรียก

6. การใช้งาน State ซับซ้อน (Object และ Array)

ตัวอย่างการใช้ Object:

<div x-data="{ user: { name: 'John', age: 30 } }">
    <h1 x-text="'Name: ' + user.name"></h1>
    <h2 x-text="'Age: ' + user.age"></h2>
    <button @click="user.age++">Increase Age</button>
</div>

ตัวอย่างการใช้ Array:

<div x-data="{ items: ['Apple', 'Banana', 'Cherry'] }">
    <ul>
        <li x-for="item in items" x-text="item"></li>
    </ul>
    <button @click="items.push('Orange')">Add Orange</button>
</div>

7. การใช้ State เริ่มต้นจากค่าภายนอก

คุณสามารถใช้ State ที่รับค่าจาก HTML Attribute ได้ เช่น:

<div x-data="{ message: $el.getAttribute('data-message') }" data-message="Hello, External!">
    <h1 x-text="message"></h1>
</div>

การทำงาน:

• ค่า data-message จาก Attribute จะถูกกำหนดเป็นค่าเริ่มต้นของ message

สรุป

ในบทนี้ คุณได้เรียนรู้การกำหนด State ด้วย x-data และการปรับเปลี่ยนค่า State ในรูปแบบต่างๆ เช่น การใช้ Event, ฟังก์ชัน, Object, และ Array ในบทถัดไป เราจะเรียนรู้วิธีแสดงค่าจาก State ด้วยคำสั่ง x-text และ x-html เพื่อเพิ่มความยืดหยุ่นให้กับการใช้งาน!