इस लेख की प्रेरणा हाल ही में मेरे द्वारा Vue आधारित फ्रंट एंड पर गतिशील लेआउट बनाने के कार्यान्वयन से मिली है।

मान लें कि आपका एपीआई एंडपॉइंट नीचे जैसा एक 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 टेम्पलेट और एक घटक बनाने की आवश्यकता है जो नेस्टेड पंक्तियों का सामना करते समय स्वयं को पुनरावर्ती रूप से कॉल कर सके। इस तरह, संरचना गतिशील रूप से मेरे द्वारा प्रदान किए गए की तरह गहराई से नेस्टेड लेआउट को संभाल लेगी।

अब, हम शीर्ष-स्तरीय लेआउट को संभालने के लिए आपके मूल घटक के अंदर इस रिकर्सिवरो घटक का उपयोग कर सकते हैं।

इतना ही। यदि आपका कोई प्रश्न है, तो कृपया नीचे एक टिप्पणी छोड़ें।