この記事のインスピレーションは、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 コンポーネントを使用して、トップレベルのレイアウトを処理できるようになります。

それでおしまい。ご質問がございましたら、以下にコメントを残してください。