La inspiración para este artículo proviene de una implementación reciente que hice para crear diseños dinámicos en una interfaz basada en Vue.

Supongamos que el punto final de su API devuelve un diseño YAML como el siguiente.

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

Esperaríamos un diseño como el siguiente de esta expresión YAML.

Para que sea fácil trabajar con esto, analizaremos esta estructura YAML y generaremos un objeto JSON. Usé el paquete yaml.

npm install yaml

Luego, podríamos importarlo y ejecutar el analizador.

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

Para que esto funcione, necesitamos crear una plantilla de Vue recursiva y un componente que pueda llamarse a sí mismo de forma recursiva cuando encuentre filas anidadas. De esta manera, la estructura manejará dinámicamente diseños profundamente anidados como el que proporcioné.

Ahora podemos usar este componente RecursiveRow dentro de su componente principal para manejar el diseño de nivel superior.

Eso es todo. Si tiene alguna pregunta, deje un comentario a continuación.