يقوم v-for بتصيير قائمة عناصر من خلال التكرار على مصفوفة (أو object/range). يجب عليك دائماً إقرانه بـ :key فريد حتى يتمكن Vue من تتبع العناصر بكفاءة.
<script setup>
import { ref } from "vue";
const items = ref([{ id: 1, name: "Apple" }, { id: 2, name: "Banana" }]);
</script>
<template>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</template>
<template>
<li v-for="(item, index) in items" :key="item.id">{{ index }}: {{ item.name }}</li>
<li v-for="(value, key) in myObject" :key="key">{{ key }}: {{ value }}</li>
<span v-for="n in 5" :key="n">{{ n }}</span> <!-- range 1..5 -->
</template>
يستخدم Vue مفتاح key لتحديد العناصر التي تغيرت أو تمت إضافتها أو إزالتها، لذلك يمكنه إعادة استخدام وإعادة ترتيب عقد DOM الموجودة بدلاً من إعادة بنائها. بدون مفتاح ثابت، يعود Vue إلى استراتيجية "in-place patch" التي قد تسبب أخطاء:
<!-- ❌ using index as key → wrong when the list reorders/filters -->
<li v-for="(item, i) in items" :key="i">
<input /> <!-- input state can attach to the WRONG item after reordering -->
</li>
<!-- ✅ stable unique id → Vue tracks each item correctly -->
<li v-for="item in items" :key="item.id">...</li>
استخدام index المصفوفة كمفتاح خطأ شائع — عندما يتم إعادة ترتيب العناصر أو إدراجها أو حذفها، يمكن أن تبقى حالة component/DOM (مثل قيم الإدخال أو حالات الاختيار) معلقة على الصف الخاطئ.
<!-- ❌ avoid — ambiguous precedence -->
<li v-for="x in items" v-if="x.active">...</li>
<!-- ✅ filter in a computed, or wrap with <template v-for> -->
v-for هو كيفية تصيير القوائم الديناميكية.
مفتاح :key ليس اختياري عملياً: مفتاح فريد وثابت يسمح لـ Vue بفحص virtual DOM بكفاءة وتجنب أخطاء عدم تطابق الحالة على إعادة الترتيب/التصفية.
معرفة استخدام معرف حقيقي (لا تستخدم الفهرس أبداً للقوائم الديناميكية) والحفاظ على فصل v-for/v-if أمر ضروري للحصول على قوائم صحيحة وعالية الأداء.