تعلم vue js ببساطة - الدرس السابع - الحلقات v-for

من أكثر الأشياء غير المحببة في البرمجة هي أن تكرر نفسك ضمن الكود، وهو ذاته ما يخبرنا به المبدأ DRY الذي تم شرحه مسبقاً في الأكاديمية ويعني Don’t repeat yourself أي لا تكرر نفسك.

tumblr_72c4620bb9b0d9b2bd705419df648242_e289b3d5_400

دوماً ما يعمل المطورون على إيجاد وسائل تقلل من تكرار كتابة الأوامر البرمجية، تماماً كما هو الأمر في vue js، حيث توجد الحلقة التكرارية v-for التي تساعدك على تكرار أمر معين لتمرر من خلاله في كل دورة بيانات مختلفة.

لو أنه يوجد لدي أسماء مجموعة من الأشخاص :

data: {
   names : [
             {'id': 1 , 'name': "أحمد"},
             {'id': 2 , 'name': "يوسف"},
             {'id': 3 , 'name': "محمد"},
             {'id': 4 , 'name': "حسن"}
           ]
       }

أريد أن اعرض هذه الأسماء ضمن قائمة كيف أقوم بذلك باستخدام v-for ؟

<div id="app">
    <ul>
        <li v-for="item in names" :key="item.id">{{item.id}} - {{item.name}} </li>
    </ul>
</div>

سوف تظهر لنا النتيجة بهذا الشكل:

1 - أحمد 
2 - يوسف
3 - محمد
4 - حسن

كما تلاحظوا اننا باستخدام سطر واحد نستطيع أن نطبع مئات النتائج باستخدام حلقة for، وهذه أحد صور قوة وبساطة vue js :wink:

أعلم انكم تتساءلون :thinking: ما الغاية من إضافة هذه التعليمة :key="item.id" ضمن حلقة v-for !

في الحقيقة يتم إضافة المفتاح key لكي يكون بمثابة رقم مرجعي لترتيب العناصر وينصح دوما باستخدامه مع الخلاقة for، وأيضا من الجيد أن يتم استخدم مفتاح فريد مثل (Primary key) أو اسم غير مكرر، لكن ليس من الجيد ان يتم استخدام المفتاح كمصفوفة أو كائن.

وهكذا يصبح الكود كامل بهذا الشكل:

الكود كامل
<div id="app">
    <ul>
        <li v-for="item in names" :key="item.id">{{item.id}} - {{item.name}} </li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            names : [
                {'id': 1 , 'name': "أحمد"},
                {'id': 2 , 'name': "يوسف"},
                {'id': 3 , 'name': "محمد"},
                {'id': 4 , 'name': "حسن"}
            ]
            
        }
    })
</script>

لتفاصيل أكثر يمكنم متابعة الدرس على اليوتيوب:

يمكنكم متابعة جميع الدروس من خلال الفهرس
فهرس سلسلة تعلم vue js ببساطة

4 Likes

دائما أفضل هذه الطريقة في كتابة الكود بشكل منظم واختصارا لعدد العناصر المضافة في html
مثل الأزرار الموجودة في navbar

2 Likes

رائع :ok_hand:

1 Like