مقدمة لعرض القائمة في Vue

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

ما هو توجيه v-for في Vue؟

ال مقابل التوجيه هو أحد توجيهات Vue التي تسمح لك بتقديم قوائم بأدنى حد من كود JavaScript. ال مقابل يعمل التوجيه بشكل مشابه لـ حلقة في JavaScript ويمكنه التكرار عبر المصفوفات والعناصر لعرض العناصر في قائمة.

للاستفادة من مقابل التوجيه ، قم بتوفير مصفوفة تريد تكرارها في ملف بيانات ممتلكات كائن الخيارات في Vue.

على سبيل المثال:

<نموذج>
<ماي>
<ليمقابل="الاسم في الأسماء">{{ اسم }}لي>
ماي>
نموذج>
<النصي>
تصدير الافتراضي {
 بيانات() {
 يعود {
 الأسماء: ['John'، 'Doe'، 'James']،
 };
 },
};
النصي>

يصور مقطع التعليمات البرمجية أعلاه مثالاً لتطبيق Vue الذي يستخدم ملف مقابل التوجيه للتكرار خلال الأسماء المصفوفة المتوفرة في بيانات ملكية.

مقابل له قيمة معينة لتعبير مكون من جزأين: متغير التكرار (اسم) و ال الأسماء مجموعة مصفوفة مقابل نقاط ل. متغير التكرار يحمل كل منهما اسم في ال الأسماء مجموعة ويعرض اسم.

Vue يخلق ملف نموذج كائن المستند (DOM) عنصر لكل منهما اسم في ال الأسماء صفيف ويجعلها على صفحة الويب.

إذا كان الأسماء تغييرات المصفوفة (على سبيل المثال ، تتم إضافة اسم جديد أو إزالة اسم قديم) ، سيقوم Vue تلقائيًا بتحديث DOM الظاهري وإعادة عرض القائمة لتعكس البيانات المحدثة.

يوفر Vue أيضًا طريقة للحصول على فهرس عنصر في قائمة.

<ليمقابل="(الاسم ، الفهرس) في الأسماء">{{name}} - {{index}}لي>

الكود أعلاه يصور بناء الجملة لعرض فهرس كل منها اسم في ال الأسماء مجموعة مصفوفة.

يمكنك أيضًا استخدام ملف مقابل التوجيه للحلقة عبر مجموعة من الأرقام:

<ليمقابل="الأسطوانات في 10">Vue جميللي>

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

كيفية إزالة العناصر من قائمة في Vue

يمكنك السماح للمستخدمين بإزالة العناصر من القوائم في تطبيق الويب الخاص بك. هذه الميزة مفيدة عند إنشاء تطبيقات مثل قائمة المهام.

يمكنك استخدام ال لصق او جمع طريقة JavaScript (هذه إحدى طرق إزالة العناصر من المصفوفات) لإزالة عنصر من قائمة في Vue.

array.splice (startIndex ، numToRemove ، newElements)

يمكن لطريقة لصق أو إزالة عناصر من مصفوفة. تأخذ طريقة لصق المعلمات بالترتيب التالي:

1. ال فهرس البداية تحدد المعلمة الفهرس الذي يبدأ عنده تعديل المصفوفة.
2. عدد إلى إزالة يشير إلى عدد العناصر التي تريد إزالتها من المصفوفة.
3. وأخيرا، فإن عناصر جديدة المعلمة ، والتي يمكنك استخدامها لإضافة عناصر إلى المصفوفة. إذا لم يتم تحديد أي عناصر ، لصق او جمع() سيزيل فقط العناصر من المصفوفة.

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

على سبيل المثال ، يمكنك إضافة زر بجوار كل اسم في المصفوفة يقوم بتشغيل طريقة لإزالة العنصر عندما ينقر المستخدم عليه:

<نموذج>
<ماي>
<ليمقابل="(الاسم ، الفهرس) في الأسماء">
 {{name}} - {{index}}
<زر @انقر="removeItem (فهرس)">يزيلزر>
لي>
ماي>
نموذج>

ال فِهرِس تتيح لنا المعلمة الوصول إلى فهرس كل منها اسم في المصفوفة ، والتي يمررها هذا البرنامج كوسيطة إلى إزالة بند طريقة. ال إزالة بند يمكن بعد ذلك استخدام الطريقة لصق او جمع طريقة لإزالة أ اسم من الأسماء مجموعة مصفوفة:

<النصي>
تصدير الافتراضي {
 بيانات() {
 يعود {
 الأسماء: ['John'، 'Doe'، 'James']،
 };
 },
 طُرق: {
 removeItem (فهرس) {
 this.names.splice (index، 1) ؛
 }
}
};
النصي>

يستخدم البرنامج النصي أعلاه ملف لصق او جمع طريقة لإزالة اسم واحد من قائمة الأسماء المقدمة. سيؤدي هذا تلقائيًا إلى تحديث القائمة في واجهة المستخدم لتعكس المصفوفة المحدثة.

كيفية عرض القوائم باستخدام Keys in Vue

ال مفتاح السمة هي سمة فريدة يستخدمها Vue لتتبع هوية كل عنصر في القائمة. عندما يتغير عنصر في القائمة ، بمساعدة ملف مفتاح يمكن لسمة Vue تحديث DOM بسرعة دون إعادة عرض القائمة بأكملها.

دعنا نلقي نظرة على مثال لعرض قائمة بالمفاتيح في Vue:

<نموذج>
<شعبة>
<ماي>
<ليمقابل="الاسم في الأسماء":مفتاح="name.id">
 {{ اسم اسم }}
<زر @انقر="removeItem (name.id)">يزيلزر>
لي>
ماي>
شعبة>
نموذج>
<النصي>
تصدير الافتراضي {
 بيانات() {
 يعود {
 الأسماء: [
 {id: 1، name: "John"}،
 {id: 2، name: "Doe"}،
 {المعرف: 3 ، الاسم: "جيمس"} ،
 ],
 };
 },
 طُرق: {
 removeItem (مفتاح) {
 this.names.splice (مفتاح - 1 ، 1) ؛
 },
 },
};
النصي>

في هذا المثال ، لديك قائمة بالعناصر ذات بطاقة تعريف ملكيات. تستخدم كتلة التعليمات البرمجية الامتداد مفتاح السمة مع مقابل توجيه لتتبع هوية كل عنصر في القائمة. يسمح هذا لـ Vue بتحديث DOM بكفاءة عندما تتغير القائمة.

إذا كنت تريد إزالة عنصر من القائمة ، فسيحدث Vue DOM دون الحاجة إلى إعادة عرض القائمة بأكملها. هذا لأن Vue يحمل هوية كل عنصر في القائمة ويمكنه فقط تحديث العناصر التي تم تغييرها.

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

باستخدام مفتاح السمة مع مقابل التوجيه يساعد في تجنب مشاكل العرض. على سبيل المثال ، عند إزالة الأسماء ، يستخدم Vue الامتداد مفتاح السمة للحفاظ على ترتيب العناصر في القائمة.

توجيهات Vue ضرورية

هنا ، قمت بتغطية أساسيات عرض القوائم في Vue ، بما في ذلك إزالة العناصر من القوائم وعرض القوائم بالمفاتيح. يمكنك بناء واجهات مستجيبة تتعامل مع قوائم البيانات المعقدة من خلال فهم هذه المفاهيم.

يحتوي Vue على عدد كبير من التوجيهات لأغراض مختلفة ، بما في ذلك العرض الشرطي وربط الأحداث وربط البيانات. يمكن أن يساعدك فهم هذه التوجيهات في إنشاء تطبيقات ويب تفاعلية فعالة.