تعلم تطوير الويب عرض مكونات Vue.js

لدينا حتى الآن مكوِّن يعمل بنجاح، ونحن الآن جاهزون لإضافة عدة مكوّنات ToDoItem إلى تطبيقنا، إذ سنتعلّم في هذا المقال كيفية إضافة مجموعة من بيانات عناصر المهام إلى المكوِّن App.vue التي سنكرّرها ونعرضها ضمن المكونات ToDoItem باستخدام الموجّه v-for.

• المتطلبات الأساسية: الإلمام بأساسيات لغات HTML وCSS وجافاسكربت JavaScript، ومعرفة استخدام سطر الأوامر أو الطرفية، إذ تُكتَب مكوِّنات Vue بوصفها مجموعةً من كائنات جافاسكربت التي تدير بيانات التطبيق وصيغة القوالب المستنِدة إلى لغة HTML المرتبطة مع بنية DOM الأساسية، وستحتاج إلى طرفية مثبَّت عليها node و npm لتثبيت Vue ولاستخدام بعض ميزاته الأكثر تقدمًا مثل مكوّنات الملف المفرد Single File Components أو دوال التصيير Render.
• الهدف: تعلّم كيفية تكرار مصفوفة من البيانات وتصييرها أو عرضها وإخراجها في مكوّنات متعددة.

عرض القوائم باستخدام الموجه v-for

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

إضافة بعض البيانات لعرضها

يجب أولًا الحصول على مصفوفة من عناصر المهام من خلال إضافة الخاصية data إلى كائن المكوّن App.vue، وتحتوي هذه الخاصية على الحقل ToDoItems الذي تكون قيمته مصفوفةً من عناصر المهام، كما سنضيف لاحقًا آليةً لإضافة عناصر مهام جديدة، ولكن يمكننا البدء ببعض عناصر المهام المقلِّدة Mock Items، إذ سيُمثَّل كل عنصر من عناصر المهام بكائن له الخاصيتان name و done.

أضِف بعض نماذج عناصر المهام كما يلي، وبالتالي تكون لديك بعض البيانات المتاحة للتصيير باستخدام الموجّه v-for:

export default {
  name: 'app',
  components: {
    ToDoItem
  },
  data() {
    return {
      ToDoItems: [
        { label: 'Learn Vue', done: false },
        { label: 'Create a Vue project with the CLI', done: true },
        { label: 'Have fun', done: true },
        { label: 'Create a to-do list', done: false }
      ]
    };
  }
};

يمكننا الآن بعد أن أصبح لدينا قائمة بالعناصر، استخدام الموجِّه v-for لعرض هذه العناصر، إذ تُطبَّق الموجَّهات Directives على العناصر مثل السمات الأخرى، كما يمكنك في حالة الموجِّه v-for استخدام صيغة خاصة مشابهة لحلقة for...in في جافاسكربت هي v-for="item in items"‎، إذ تُعَدّ items هي المصفوفة التي نريد تكرار عناصرها؛ أما item، فهو مرجع للعنصر الحالي في المصفوفة.

يرتبط الموجِّه v-for بالعنصر الذي تريد تكراره، ويصيّر ذلك العنصر وأبناؤه، كما نريد في حالتنا عرض العنصر <li> لكل عنصر مهمةً ضمن المصفوفة ToDoItems، ثم نريد تمرير البيانات من كل عنصر مهمة إلى المكوِّن ToDoItem.

السمة key

هناك جزء آخر من الصيغة المُستخدَمة مع الموجِّه v-for يجب معرفته وهو السمة key، إذ يحاول Vue تحسين تصيير العناصر في القائمة من خلال تصحيح عناصر القائمة حتى لا يعيد إنشاءها في كل مرة تتغير فيها القائمة، لذلك يحتاج إلى "مفتاح key" فريد للعنصر نفسه الذي يرتبط مع الموجِّه v-for للتأكد من أنه يعيد استخدام عناصر القائمة بطريقة مناسبة.

يجب أن تكون قيم السمات key سلسلةً نصيةً أو قيمًا عدديةً للتأكد من أنّ Vue يمكنه الموازنة بين هذه السمات بدقة، كما يمكن أن يكون استخدام حقل الاسم name أمرًا رائعًا، ولكن يتحكّم به إدخال المستخدِم، مما يعني أنه لا يمكننا ضمان أن تكون الأسماء فريدةً، كما يمكننا استخدام التابع lodash.uniqueid()‎ كما فعلنا في المقال السابق.

استورد أولًا lodash.uniqueid إلى المكوِّن App بالطريقة نفسها التي استخدمناها مع المكوِّن ToDoItem كما يلي:

import uniqueId from 'lodash.uniqueid';

أضِف بعد ذلك حقل المعرّف id لكل عنصر في المصفوفة ToDoItems، وأسند القيمة uniqueId('todo-')‎ لكل معرِّف، إذ يجب أن تبدو محتويات العنصر <script> في App.vue الآن كما يلي:

import ToDoItem from './components/ToDoItem.vue';
import uniqueId from 'lodash.uniqueid'

export default {
  name: 'app',
  components: {
    ToDoItem
  },
  data() {
    return {
      ToDoItems: [
        { id: uniqueId('todo-'), label: 'Learn Vue', done: false },
        { id: uniqueId('todo-'), label: 'Create a Vue project with the CLI', done: true },
        { id: uniqueId('todo-'), label: 'Have fun', done: true },
        { id: uniqueId('todo-'), label: 'Create a to-do list', done: false }
      ]
    };
  }
};

أضِف الموجِّه v-for والسمة key إلى العنصر <li> في قالب App.vue كما يلي:

<ul>
  <li v-for="item in ToDoItems" :key="item.id">
    <to-do-item label="My ToDo Item" :done="true"></to-do-item>
  </li>
</ul>

إذا أجرينا هذا التغيير، فيمكن لكل تعبير جافاسكربت بين وسوم <li> الوصول إلى قيمة item وإلى سمات المكوِّن الأخرى، وهذا يعني أنه يمكننا تمرير حقول كائنات العنصر إلى المكوِّن ToDoItem وتذكّر استخدام صيغة v-bind، ويُعَدّ ذلك مفيدًا حقًا لأننا نريد أن تعرض عناصر المهام خاصيات label بوصفها تسميةً أو عنوانًا لها وليس عنوانًا ثابتًا "My Todo Item"، كما نريد أن تعكس حالة التحديد الخاصيات done بحيث لا تُضبَط دائمًا على القيمة done="false"‎.

عدِّل السمة label="My ToDo Item"‎ إلى ‎:label="item.label"‎ والسمة ‎:done="false"‎ إلى ‎:done="item.done"‎ كما يلي:

<ul>
  <li v-for="item in ToDoItems" :key="item.id">
     <to-do-item :label="item.label" :done="item.done"></to-do-item>
  </li>
</ul>

إذا نظرت إلى تطبيقك المُشغَّل الآن، فسيُظهِر عناصر المهام بأسمائها الصحيحة، وإذا فحصت الشيفرة البرمجية، فسترى أنّ جميع المدخلات لها معرِّفات فريدة مأخوذة من الكائن في المكوِّن App.

إجراء بعض التعديلات

يمكنك إجراء عملية إعادة البناء Refactoring هنا، إذ يمكننا تحويل المعرِّف إلى خاصية بدلًا من إنشاء معرِّفات لمربعات الاختيار ضمن المكوِّن ToDoItem، وبالرعم من أنّ ذلك لا يُعَدّ ضروريًا، إلّا أنه يسهّل علينا إدارته نظرًا لأنه يجب إنشاء معرِّف فريد لكل عنصر مهمة على أية حال.

1. أضف خاصية id الجديدة إلى المكون ToDoItem.
2. اجعل هذه الخاصية إجباريةً واجعل نوعها String.
3. احذف الحقل id من السمة data لمنع تعارض الأسماء.
4. لم نَعُد نستخدِم التابع uniqueId، لذلك يجب إزالة السطر التالي، وإلا فسيعطي تطبيقك خطأً.

import uniqueId from 'lodash.uniqueid';‎

يجب أن تبدو محتويات العنصر <script> في المكوِّن ToDoItem كما يلي:

export default {
    props: {
        label: {required: true, type: String},
        done: {default: false, type: Boolean},
        id: {required: true, type: String}
    },
    data() {
        return {
           isDone : this.done,
        }
    },
}

مرّر item.id الآن في المكون App.vue بوصفه خاصيةً إلى المكوِّن ToDoItem، إذ يجب أن يبدو قالب App.vue الآن كما يلي:

<template>
  <div id="app">
    <h1>My To-Do List</h1>
    <ul>
      <li v-for="item in ToDoItems" :key="item.id">
        <to-do-item :label="item.label" :done="item.done" :id="item.id"></to-do-item>
      </li>
    </ul>
  </div>
</template>

إذا نظرت إلى موقعك المُصيَّر الآن، فيجب أن يبدو كما هو، ولكن تعني عملية إعادة البناء أن معرّفنا id مأخوذ من البيانات الموجودة ضمن App.vue وهو مُمرَّر إلى المكون ToDoItem بوصفه خاصية Prop مثل أي شيء آخر، لذلك أصبحت الأمور الآن منطقيةً ومتناسقةً أكثر.

الخلاصة

لدينا الآن عينة من البيانات وحلقة تأخذ كل جزء من هذه البيانات وتصيّره ضمن المكوِّن ToDoItem في تطبيقنا، إذ يجب الآن السماح لمستخدمينا بإدخال عناصر مهامهم في التطبيق، ولذلك سنحتاج إلى نص حقل الإدخال <input> وحدث يُطلَق عند إرسال البيانات وتابع للإطلاق بهدف إضافة البيانات وتصيير القائمة بالإضافة إلى نموذج للتحكم في البيانات، وهذا هو موضوعنا في المقال التالي.

ترجمة -وبتصرّف- للمقال Rendering a list of Vue components.

اقرأ أيضًا

• المقال السابق: إنشاء المكونات في تطبيق Vue.js
• مدخل إلى التعامل مع المكونات في Vue.js
• النسخة الكاملة لكتاب أساسيات إطار العمل Vue.js