List Rendering ใน Vue 3

List Rendering คือการวนลูปแสดงผลรายการ (array, object) ใน template ด้วย directive v-for

v-for คืออะไร?

• ใช้สำหรับวนลูป array หรือ object เพื่อสร้าง element/component หลายตัวตามข้อมูล
• สามารถใช้กับ array, object, หรือช่วงตัวเลข (range)

ตัวอย่าง: วนลูป array

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

<script setup lang="ts">
import { ref } from "vue";
const users = ref([
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
]);
</script>

ตัวอย่าง: วนลูป object

<template>
  <div v-for="(value, key) in info" :key="key">
    {{ key }}: {{ value }}
  </div>
</template>

<script setup lang="ts">
const info = {
  age: 25,
  country: "Thailand",
};
</script>

ตัวอย่าง: วนลูปช่วงตัวเลข (range)

<template>
  <span v-for="n in 5" :key="n">{{ n }}</span>
</template>

การใช้ key ที่ถูกต้อง

• ควรใส่ :key ที่ unique ในแต่ละรอบของ v-for เพื่อให้ Vue จัดการ DOM ได้มีประสิทธิภาพ
• ถ้าใช้ array ของ object ให้ใช้ id ที่ไม่ซ้ำกัน

v-for ซ้อน v-if (ข้อควรระวัง)

• ถ้าใช้ v-if กับ v-for ใน element เดียวกัน จะ evaluate v-if ในทุก loop (อาจทำงานไม่ตรงที่คาด)
• ควรแยก v-if ออกมาครอบ v-for หรือใช้ computed filter data ก่อน

ข้อควรระวังและแนวทางเลือกใช้

• ใส่ key ที่ unique เสมอใน v-for
• หลีกเลี่ยงการใช้ index เป็น key ถ้าข้อมูลมีการเปลี่ยนแปลงบ่อย
• ถ้าต้อง filter หรือซ่อนบางรายการ ให้ filter ข้อมูลก่อน แล้วค่อย v-for
• ใช้ v-for ได้ทั้งกับ element และ component