คำสั่ง v-for

   อัปเดตล่าสุด Feb. 15, 2024

คำสั่ง 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  อย่างละเอียด



คอร์สเรียนแนะนำ