v-for توجيه عرض القوائم
آخر تحديث: 2026-10-22
v-for توجيه عرض القوائم
يعرض v-for قائمة عناصر بالمرور على مصفوفة أو كائن بصيغة item in items. وفِّر دائمًا key لضمان تحديثات فعّالة.
| المجموعة | التوجيهات |
|---|---|
| النوع | توجيه |
| النطاق | القالب |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
<li v-for="(item, index) in items" :key="item.id">{{ index }} - {{ item.name }}</li>
<!-- object iteration -->
<div v-for="(value, key) in object"></div>⚙️ الوسائط
| expression | قيمة قابلة للتكرار (مصفوفة/كائن/عدد/نص)؛ والوسيط الثاني هو الفهرس أو المفتاح |
|---|
القيمة المُرجعة：توجيه، بلا قيمة مُعادة
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
Three list items render: 1. HTML, 2. CSS, 3. JavaScript.💡 نقاط مهمة
⚠️ تحذير وفِّر دائمًا key فريدًا (استخدم id وليس الفهرس): فمفاتيح الفهرس تفسد الحالة عند الإدراج أو الحذف.
⚠️ تحذير لا تقرن v-for مع v-if على العنصر نفسه: غلِّف عنصر v-for بـ template وضع v-if داخله.
💡 نصيحة دوال تعديل المصفوفات (push/splice/sort) متتبَّعة؛ أما الإسناد المباشر arr[0] = x فليس كذلك.
🏷️ التوجيهات ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س لماذا يهم key إلى هذا الحد؟
ج يُعرِّف key العقد: فمفاتيح الفهرس تجعل الحالة القديمة تلتصق بالصف الخطأ عند الإدراج أو الحذف.
س لماذا لا يُحدِث arr[0] = x أي تغيير؟
ج في Vue 3 يمكن للبروكسي التفاعلي تتبع الكتابة على الفهارس؛ أما المصفوفات العادية فلا تُراقَب.
س هل يمكن لـ v-for وv-if مشاركة العنصر نفسه؟
ج غير مستحسن: يعمل v-if أولًا دون متغير الحلقة. غلِّفه بـ template خارجي.
