คำสั่ง v-for

คำสั่ง v-for คือ หัวใจสำคัญในการสร้างหรือแสดงผลข้อมูลแบบ dynamic ภายใน Template ของ Vue 3 บทเรียนนี้จะพาไปเจาะลึกการใช้งาน เทคนิคขั้นสูง และแนวทางปฏิบัติที่ดี เพื่อใช้  v-for  ได้อย่างมั่นใจ

การใช้งาน v-for

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script setup>
const items = [
  { id: 1, name: "Item 1" },
  { id: 2, name: "Item 2" },
];
</script>

คำอธิบาย

• ทำการ loop ข้อมูลใน  items 
• แสดงค่า  name  ของแต่ละ object
• key สำคัญมาก ช่วยให้ Vue สามารถ track ข้อมูลเมื่อมีการเปลี่ยนแปลง

เทคนิคเพิ่มเติม

1. ฟิลเตอร์สำหรับจำกัดข้อมูลที่แสดงด้วย filteredItems 

<li v-for="item in filteredItems" :key="item.id">
  {{ item.name }}
</li>

2. คำสั่ง  slot ปรับแต่งส่วนภายใน

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot :item="item" />
    </li>
  </ul>
</template>

<script setup>
<slot :item="item" />
</script>

3. การจัดการอินเด็กซ์โดยการใช้  $index 

<li v-for="item in items" :key="item.id">
  {{ $index + 1 }}: {{ item.name }}
</li>

4. การจัดการคีย์พิเศษ 

<li v-for="(item, key) in uniqueItems" :key="key">
  {{ item.name }}
</li>

Best Practice สำหรับ v-for

• ใช้  key  เสมอโดยเฉพาะกับข้อมูลแบบ dynamic
• หลีกเลี่ยงการรันฟังก์ชันหนักภายใน  v-for 
• แยกตรรกะที่ซับซ้อนออกเป็นฟังก์ชัน
• พิจารณาใช้  v-show  สำหรับการซ่อน/แสดง รวดเร็วกว่า  v-for 
• ทดสอบผลลัพธ์ของ  v-for  อย่างละเอียด