كيفية إضافة عبارات شرطية إلى حلقات v في Vue.js

أثناء العمل في مشروع كبير في Vue.js مؤخرًا ، واجهت مشكلة عدة مرات تبدو شائعة ولكنني لم أجد أي تفسير في وثائق Vue.js حول كيفية التعامل معها.

المشكلة التي أشير إليها هي إضافة عبارات شرطية إلى حلقات v-for الخاصة بنا في Vue.

اسمحوا لي أن أوضح ذلك بمثال:

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

الآن المشكلة:

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

هذا سيناريو شائع كما يمكنك أن تتخيل ، الرغبة في تنفيذ كائنات بشكل مشروط. في الواقع فقط تشغيل الحلقة على الكائنات التي تطابق معايير معينة. والسؤال هو كيف يمكنك أن تفعل ذلك؟

غريزة بلدي الطبيعية

بطبيعة الحال فكرت في الجمع بين v-for و v-if على نفس الخط. مع كل تكرار ، تحقق مما إذا كان يطابق معايير معينة. مثله:

 

{{user.name}}

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

مكافحة أنماط

هناك حل بديل لهذا يمكنك تجربته. في هذا المثال البسيط ، يمكننا أن نعلق v-if على العنصر

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

فكرة أخرى كانت لدي لإنشاء ملف فارغ

بين العنصر الأولي للحلقة والعناصر الأخرى. مثله:

   
       

{{user.name}}     

مرة أخرى ، هذا من شأنه أن يعمل من الناحية الفنية. لكن لدينا الآن عناصر div فارغة حول كل كائن والتي من المحتمل أن تتداخل مع نمط DOM ونمط CSS الوهمية. بالإضافة إلى ذلك ، يكتنف التطبيق لدينا ويضيف بنية غير ضرورية إلى ترميز HTML الخاص بنا.

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

حتما توجد طريقة افضل…

الحل: استخدام الخصائص المحسوبة!

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

يمكنك ويجب عليك. الخصائص المحسوبة هي الأداء للغاية.

إذا كنت تقوم بتصفية صفيف:

الحل السهل هو استخدام `.filter ()` لإرجاع المستخدمين النشطين فقط.

 

{{user.name}}

var app = vue new ({
   el: '#app' ،
   البيانات: {
     المستخدمين: [
       {الاسم: 'Alex' ، نشط: true} ،
       {الاسم: 'John' ، نشط: false} ،
       {الاسم: جيمس ، نشط: صحيح}
     ]
   }،
   محسوب: {
     activeUsers: function () {
       قم بإرجاع this.users.filter (function (u) {
         العودة u.active
     })
   } / / يحتوي فقط على أليكس وجيمس
 }
})؛

حقا سريعة دعونا نرى ما يحدث. أولاً ، دعونا نلقي نظرة على مثيل Vue الذي ننشئه في أسفل المستند. إنه مثيل Vue عادي ويمكنك مشاهدة بياناتنا: يحتوي الكائن على 3 مستخدمين في شكل صفيف (من المهم أن يكون صفيفًا وليس كائنًا ، وأكثر في هذا لاحقًا).

الآن في قسم الخصائص المحسوبة ، أنشأنا خاصية activeUsers التي يتم حسابها من خاصية المستخدمين في البيانات: {} الجزء أعلاه.

للحصول على جميع المستخدمين النشطين ، نستخدم ببساطة طريقة .filter () في صفيف المستخدمين [] ، ثم نحتفظ فقط بالمستخدمين حيث يكون .active صحيحًا.

يمكنك معرفة المزيد حول .filter () في مستندات Mozilla.

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

تصفية كائن

الآن المثال أعلاه يوضح كيفية تصفية من خلال مجموعة من الكائنات. إذا كان الفهرس / المفتاح الخاص بك هو عدد صحيح أكثر مما يمكنك استخدام الأسلوب أعلاه.

ومع ذلك ، لن تنجح هذه التقنية لأن .filter () مخصص فقط للصفائف (أو الكائنات التي تحتوي على مفاتيح عدد صحيح). ولكن لن ينجح الأمر إذا كان كائن المستخدمون {} يبدو كالتالي:

{
  أليكس: {نشط: صحيح} ،
  جون: {نشط: خطأ} ،
  جيمس: {نشط: صحيح}
}

مرة أخرى ، تذكر أن هذا تم تبسيطه على سبيل المثال. ولكن عندما لا يكون لديك مفاتيح عدد صحيح وبدلاً من ذلك تملك مفاتيح كائنات قائمة على السلسلة ، لا يمكنك استخدام .filter () ، لكن مفهوم استخدام الخصائص المحسوبة لتصفية قائمتك ومن ثم لا يزال تطبيق خاصية الكمبيوتر يظل ساريًا.

أحب حقًا استخدام Lodash وأميل إلى استخدامه في معظم المشاريع على أي حال. لذلك هناك طريقة رائعة للقيام بذلك باستخدام Lodash. سنستخدم طريقة _.pickBy () للحفر في كل كائن وإرجاع الكائنات التي تتوافق مع معاييرنا فقط.

 

{{user.name}}

var app = vue new ({
  el: '#app' ،
  البيانات: {
    المستخدمين: [
      {الاسم: 'Alex' ، نشط: true} ،
      {الاسم: 'John' ، نشط: false} ،
      {الاسم: جيمس ، نشط: صحيح}
    ]
  }،
  محسوب: {
    activeUsers: function () {
      إرجاع _.pickBy (this.users ، الدالة (u) {
        العودة u.active ؛
      })؛
    } // يحتوي فقط على {Alex: {…} ، James: {...}}
  }
})؛

هذا هو نفس المثال أعلاه ، لكنك سترى أننا نستخدم طريقة Lodash _.pickBy () للتعمق في كل كائن والعثور على خاصية ثم قبول المستخدم كجزء من مجموعتنا للتكرار.

استنتاج

إذن ، فهناك طريقة سهلة لتصفية أو تنفيذ حلقات فرعية من الكائنات الكبيرة! الأهم من ذلك أنه من السهل الحفاظ على منطق HTML الخاص بك وفي كائن Vue (حيث ينتمي) والحفاظ عليه.