Dev to webs {Coding…}

เรียนรู้การพัฒนาซอฟเวอร์ เพื่อความรู้ที่ยั่งยืน

บทที่ 14: การใช้ Index ใน x-for

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

Index ในคำสั่ง x-for คือค่าตำแหน่งของแต่ละรายการใน Array ซึ่งสามารถใช้งานได้เมื่อวนลูปผ่าน Array โดยใช้โครงสร้าง (item, index)

  • index เริ่มต้นที่ 0 และเพิ่มขึ้นตามลำดับของรายการ
  • ช่วยให้สามารถแสดงหมายเลขลำดับหรือใช้งานใน Expression ต่าง ๆ ได้

โครงสร้างพื้นฐาน:

<template x-for="(item, index) in items">
    <element x-text="`Index: ${index}, Value: ${item}`"></element>
</template>

2. การใช้ Index ใน x-for กับ Array

ตัวอย่างพื้นฐาน:
<div x-data="{ items: ['Apple', 'Banana', 'Cherry'] }">
    <ul>
        <template x-for="(item, index) in items">
            <li x-text="`${index + 1}: ${item}`"></li>
        </template>
    </ul>
</div>

คำอธิบาย:

  • index ใช้แสดงตำแหน่งใน Array
  • index + 1 ชดเชยค่า Index ให้เริ่มต้นที่ 1 (แทน 0)
  • แสดงผล: 1: Apple 2: Banana 3: Cherry

3. การใช้ Index กับ Key เพื่อประสิทธิภาพ

เมื่อใช้ x-for กับข้อมูลที่เปลี่ยนแปลงบ่อย ควรกำหนด Key เพื่อช่วยลดการ Render ที่ไม่จำเป็น:

<div x-data="{ items: ['Apple', 'Banana', 'Cherry'] }">
    <ul>
        <template x-for="(item, index) in items" :key="index">
            <li x-text="`${index + 1}: ${item}`"></li>
        </template>
    </ul>
</div>

คำอธิบาย:

  • :key="index" กำหนด Key สำหรับแต่ละรายการตามตำแหน่ง Index

4. การใช้ Index ใน Expression หรือเงื่อนไข

ตัวอย่าง: แสดงรายการที่เป็นตำแหน่งคู่
<div x-data="{ items: ['Apple', 'Banana', 'Cherry', 'Date'] }">
    <ul>
        <template x-for="(item, index) in items" :key="index">
            <li x-show="index % 2 === 0" x-text="`${index + 1}: ${item}`"></li>
        </template>
    </ul>
</div>

คำอธิบาย:

  • index % 2 === 0 แสดงรายการที่ตำแหน่งเป็นเลขคู่
  • แสดงผล: 1: Apple 3: Cherry

5. การใช้ Index ใน Array ซ้อนกัน

ตัวอย่าง:
<div x-data="{ categories: [
    { name: 'Fruits', items: ['Apple', 'Banana'] },
    { name: 'Vegetables', items: ['Carrot', 'Broccoli'] }
] }">
    <ul>
        <template x-for="(category, categoryIndex) in categories" :key="categoryIndex">
            <li>
                <strong x-text="`${categoryIndex + 1}: ${category.name}`"></strong>
                <ul>
                    <template x-for="(item, itemIndex) in category.items" :key="itemIndex">
                        <li x-text="`${itemIndex + 1}: ${item}`"></li>
                    </template>
                </ul>
            </li>
        </template>
    </ul>
</div>

คำอธิบาย:

  • วนลูปหมวดหมู่ด้วย categoryIndex
  • วนลูปรายการในหมวดหมู่ด้วย itemIndex
  • แสดงผล: 1: Fruits - 1: Apple - 2: Banana 2: Vegetables - 1: Carrot - 2: Broccoli

6. การใช้งาน Index ร่วมกับฟังก์ชัน

ตัวอย่าง: แสดงตำแหน่งรายการที่คลิก
<div x-data="{ items: ['Apple', 'Banana', 'Cherry'], clickedIndex: null }">
    <ul>
        <template x-for="(item, index) in items" :key="index">
            <li>
                <button @click="clickedIndex = index">
                    <span x-text="`${index + 1}: ${item}`"></span>
                </button>
            </li>
        </template>
    </ul>
    <p x-show="clickedIndex !== null" x-text="`You clicked item at position: ${clickedIndex + 1}`"></p>
</div>

คำอธิบาย:

  • เมื่อคลิกปุ่ม ระบบจะบันทึกตำแหน่งที่คลิกไว้ใน clickedIndex
  • ข้อความจะแสดงตำแหน่งของรายการที่ถูกคลิก

7. ข้อควรระวังในการใช้ Index

  1. Index อาจเปลี่ยนแปลงได้:
    • หากมีการเพิ่มหรือลบรายการใน Array, ค่า Index ของรายการที่เหลืออาจเปลี่ยนไป
  2. ไม่ควรใช้ Index เป็น Key หากรายการไม่ซ้ำ:
    • หากข้อมูลมีค่าที่เป็นเอกลักษณ์ เช่น id ให้ใช้ id แทน Index เป็น Key

สรุป

ในบทนี้ คุณได้เรียนรู้วิธีใช้ Index ใน x-for เพื่อแสดงตำแหน่งของรายการและการประยุกต์ใช้ใน Expression หรือฟังก์ชันต่างๆ พร้อมคำแนะนำเกี่ยวกับการใช้ Key เพื่อเพิ่มประสิทธิภาพการ Render ในบทถัดไป เราจะพูดถึงการใช้ Key ใน x-for และวิธีเพิ่มประสิทธิภาพให้กับการวนลูป!