Die Inspiration für diesen Artikel stammt von einer kürzlich durchgeführten Implementierung, mit der ich dynamische Layouts auf einem Vue-basierten Frontend erstellt habe.

Angenommen, Ihr API-Endpunkt gibt ein YAML-Layout wie unten zurück.

---
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

Wir würden von diesem YAML-Ausdruck ein Layout wie das folgende erwarten.

Um die Arbeit damit zu vereinfachen, analysieren wir diese YAML-Struktur und generieren ein JSON-Objekt. Ich habe das Yaml-Paket verwendet.

npm install yaml

Dann könnten wir es importieren und den Parser ausführen.

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

Damit dies funktioniert, müssen wir eine rekursive Vue-Vorlage und eine Komponente erstellen, die sich selbst rekursiv aufrufen kann, wenn sie auf verschachtelte Zeilen stößt. Auf diese Weise verarbeitet die Struktur dynamisch tief verschachtelte Layouts wie das von mir bereitgestellte.

Jetzt können wir diese RecursiveRow-Komponente in Ihrer übergeordneten Komponente verwenden, um das Layout der obersten Ebene zu verwalten.

Das ist es. Wenn Sie Fragen haben, hinterlassen Sie bitte unten einen Kommentar.