Вдохновением для этой статьи послужила недавняя реализация, которую я сделал для создания динамических макетов на основе интерфейса 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 внутри вашего родительского компонента для обработки макета верхнего уровня.

Вот и все. Если у вас есть вопросы, оставьте комментарий ниже.