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

لنفترض أن نقطة نهاية API الخاصة بك ترجع تخطيط YAML كما هو موضح أدناه.

---
row:
  - col: 12
    row:
      - col: 12
        component_id: 1
  - col: 12
    row:
      - col: 6
        component_id: 2
      - col: 6
        row:
          - col: 12
            component_id: 3
          - col: 12
            component_id: 4

نتوقع تخطيطًا مثل ما يلي من تعبير YAML هذا.

لذا، لتسهيل العمل مع هذا، سنقوم بتحليل بنية YAML هذه وإنشاء كائن JSON. لقد استخدمت حزمة yaml.

npm install yaml

ثم يمكننا استيراده وتشغيل المحلل اللغوي.

import YAML from 'yaml'
const jsonObject = YAML.parse(yaml_struct)

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

الآن، يمكننا استخدام مكون RecursiveRow هذا داخل المكون الأصلي الخاص بك للتعامل مع تخطيط المستوى الأعلى.

هذا كل شيء. إذا كان لديك أي أسئلة، يرجى ترك تعليق أدناه.