Vue.js للمبتدئين الدرس 4: عرض القوائم

اليوم ، في الدرس الرابع من البرنامج التعليمي Vue ، سنتحدث عن كيفية عرض قوائم العناصر على الصفحة.







→ درس المبتدئين Vue.js 1: المثال Vue

→ Vue.js للمبتدئين ، الدرس 2: سمات الربط

→ Vue.js الدرس 3: العرض الشرطي

→ Vue.js للمبتدئين الدرس 4: عرض القوائم

→ Vue .js للمبتدئين الدرس الخامس: معالجة الأحداث

→ Vue.js للمبتدئين الدرس 6: فئات وأنماط الربط

← Vue.js للمبتدئين الدرس 7: الخصائص المحسوبة

→ Vue.js للمبتدئين الدرس 8: المكونات

الغرض من الدرس

نحتاج إلى عرض معلومات إضافية عنها في بطاقة المنتج. يجب تقديم هذه المعلومات في شكل قائمة تحتوي على ما يلي:

• 80٪ قطن
• 20٪ بوليستر
• التمييز بين الجنسين

الكود الأولي

لنبدأ بكود HTML index.htmlالتالي (ملف ):

<div class="product">
  <div class="product-image">
    <img :src="image" />
  </div>

  <div class="product-info">
    <h1>{{ product }}</h1>
    <p v-if="inStock">In stock</p>
    <p v-else>Out of Stock</p>
  </div>
</div>

هذه هي الطريقة الكائن dataاستخدامها عند instantiating فيو سيبدو main.js:

data: {
    product: "Socks",
    image: "./assets/vmSocks-green.jpg",
    inStock: true,
    details: ['80% cotton', '20% polyester', 'Gender-neutral']
}

ظهرت خاصية جديدة هنا - مجموعة details.

مهمة

من الضروري عرض محتويات المصفوفة على الصفحة details. يتطلب هذا إيجاد إجابات لأسئلة حول كيفية التكرار عبر مصفوفة وكيفية تصور بياناتها.

details: ['80% cotton', '20% polyester', 'Gender-neutral']

حل المشكلة

سيساعدنا توجيه Vue آخر هنا - v-for. يسمح لك بالتكرار عبر المصفوفات وعرض البيانات التي تحتوي عليها.



أضف إلى index.htmlالكود التالي:

<ul>
  <li v-for="detail in details">{{ detail }}</li>
</ul>

بفضل هذا ، ستظهر قائمة بالمعلومات الإضافية حول المنتج على الصفحة.





قائمة على الصفحة تبدو



الصيغة المستخدمة في علامات الاقتباس مع التوجيهv-forمألوفة لأولئك الذين استخدموا حلقات JavaScriptfor ofأوfor in. دعنا نتحدث عن كيفية عمل التوجيهv-for.



هنا نستخدم الاسم المفرد (detail) كاسم مستعار لقيم السلسلة المسترجعة من المصفوفة. ثم نكتبinونحدد اسم المجموعة التينكررها(details). تشير الأقواس المزدوجة المتعرجة إلى نوع البيانات التي نريد عرضها ({{ detail }}).



نظرًا لأن البناءv-forداخل عنصر<li>، فإن Vue سيستنتج عنصرًا جديدًا<li>لكل عنصر في المصفوفةdetails. إذا تمv-forاستخدامالتوجيهداخل عنصر<div>، ثم لكل عنصر في المصفوفة ، سيتم إخراج عنصر <div>يعرض قيمة هذا العنصر في المصفوفة.



فكر في التوجيه v-forباعتباره خط أنابيب مع مناور. يأخذ عناصر المجموعة ، واحدًا تلو الآخر ، ويجمع قائمة.





التوجيه v-for يشبه خط الأنابيب



، فلنلق نظرة على مثال آخر v-forأكثر تعقيدًا للاستخدام . هنا سنخرج <div>البيانات المخزنة في مجموعة من الكائنات في عنصر .

التكرار خلال مجموعة من الكائنات

تحتاج بطاقة المنتج ، التي نعمل على تطويرها ، إلى القدرة على عرض معلومات حول الإصدارات المختلفة لنفس المنتج. هذه المعلومات موجودة في مجموعة من الكائنات variants، والتي يتم تخزينها في كائن بيانات data. كيفية تكرار هذه المجموعة من الكائنات لإخراج البيانات؟



هذه هي المصفوفة المعنية:

variants: [
  {
    variantId: 2234,
    variantColor: 'green'    
  },
  {
    variantId: 2235,
    variantColor: 'blue'
  }
]

تحتوي الكائنات الموجودة في هذه المصفوفة على اسم اللون ومعرف متغير المنتج.



دعنا نعرض هذه البيانات على الصفحة:

<div v-for="variant in variants">
  <p>{{ variant.variantColor }}</p>
</div>

قائمة متغيرات المنتج



هنا نحتاج فقط إلى عرض اسم اللون المقابل لمتغيرات المنتج المختلفة. لذلك ، عند الإشارة إلى عناصر المصفوفة ، نستخدم تدوين النقطة. إذا كتبنا ، بأقواس معقوفة ،{{ variant }}فسيتم عرض الكائن بأكمله على الصفحة.



لاحظ أنه يوصى باستخدام سمة مخصصة عند عرض مثل هذه العناصرkey. هذا يسمح لـ Vue بتتبع هوية العناصر. دعنا نضيف مثل هذه السمة إلى الكود الخاص بنا ، باستخدام قيمة خاصية فريدةvariantIdللكائنات التي تحتوي على معلومات حول خيارات المنتج:

<div v-for="variant in variants" :key="variant.variantId">
  <p>{{ variant.variantColor }}</p>
</div>

ورشة عمل

أضف مصفوفة sizesتحتوي على معلومات حول أحجام الجوارب إلى كائن البيانات ، وباستخدام التوجيه v-for، اعرض البيانات من هذه المصفوفة على الصفحة كقائمة. قد تبدو



المصفوفة sizesكما يلي:

sizes: ['S', 'M', 'L', 'XL', 'XXL', 'XXXL']

إليك نموذج يمكنك استخدامه لحل هذه المشكلة.



→ هنا حل المشكلة

النتيجة

اليوم تعلمنا ما يلي:

• v-forيسمح لك التوجيه بالتكرار عبر المصفوفات لعرض البيانات التي تحتوي عليها.
• v-forيستخدم البناء اسمًا مستعارًا للوصول إلى عناصر الصفيف. يشار إلى اسم المصفوفة نفسها هنا أيضًا. على سبيل المثال، قد تبدو مثل هذا: v-for=«item in items».
• عند التكرار على مصفوفة من الكائنات ، يمكنك استخدام تدوين النقطة للوصول إلى خصائص الكائن.
• عند الاستخدام ، v-forيوصى بتعيين مفتاح فريد لكل عنصر معروض.

هل تبحث في وثائق Vue لهذه الدورة؟



→ درس المبتدئين Vue.js 1: المثال Vue

→ Vue.js للمبتدئين ، الدرس 2: سمات الربط

→ Vue.js الدرس 3: العرض الشرطي

→ Vue.js للمبتدئين الدرس 4: عرض القوائم

→ Vue .js للمبتدئين الدرس الخامس: معالجة الأحداث

→ Vue.js للمبتدئين الدرس 6: فئات وأنماط الربط

← Vue.js للمبتدئين الدرس 7: الخصائص المحسوبة

→ Vue.js للمبتدئين الدرس 8: المكونات