key مفتاح تمييز عناصر القائمة
آخر تحديث: 2026-10-22
key مفتاح تمييز عناصر القائمة
يُعرِّف key عناصر القائمة في v-for، ما يتيح لـ Vue إعادة استخدام العقد أو إعادة بنائها بشكل صحيح عند تغيّر القوائم.
| المجموعة | المدمجات |
|---|---|
| النوع | سمة خاصة |
| النطاق | القالب |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
<li v-for="item in items" :key="item.id">{{ item.name }}</li>⚙️ الوسائط
| props | قيمة فريدة وثابتة (استخدم مُعرِّفًا id وليس الفهرس) |
|---|
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
Reversing reorders rows without dragging state into the wrong row.💡 نقاط مهمة
⚠️ تحذير استخدام الفهرس كـ key خطأ كلاسيكي: تتقافز الحالة بين الصفوف بعد الإدراج أو الحذف.
ℹ️ ملاحظة يؤدي key أيضًا إلى إعادة إنشاء العنصر عند تغيّر قيمته.
💡 نصيحة فضّل المعرِّفات id الثابتة، ثم الحقول الفريدة في بياناتك، وأخيرًا الفهرس.
🏷️ المدمجات ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س ماذا لو أُهمل key؟
ج يلجأ Vue إلى الترقيع في المكان نفسه مع تحذير — وتظهر الأخطاء عند إعادة الترتيب.
س هل يجب أن تكون المفاتيح فريدة عالميًا؟
ج يكفي أن تكون فريدة داخل القائمة.
س هل يمكن لـ key فرض إعادة العرض؟
ج نعم — اربط به قيمة متغيّرة لإعادة إنشاء العنصر.
