Crear un árbol de componentes con Vuejs 2 (Sistema Tree)
Vamos a ver cómo podemos crear un árbol de componentes con Vuejs 2 con una profundidad ilimitada. Esta funcionalidad no es algo que siempre tengas que hacer, pero sí que es cierto que cuando llega el momento de llevarla a cabo, si no lo has hecho antes, te verás ante problemas difíciles de solucionar.
Si te interesa aprender a desarrollar este tipo de funcionalidades y no quieres perder tiempo en tener que encontrar la forma te invito a que te suscribas a la plataforma y puedas acceder al contenido completo de esta entrada y a todos los cursos que tenemos disponibles.
Crear el componente TreeView (ROOT)
La primera parte para desarrollar esta funcionalidad es clave, necesitamos preparar bien los datos de forma dinámica a partir de objetos simples como el siguiente:
La meta de tener objetos tan simples es que en la mayoría de los casos esta información sale de una base de datos relacional, la cual almacena básicamente esa información.
Dicho esto, vamos a crear el componente TreeView, que cómo puedes ver en la imagen al inicio de esta entrada, es el componente ROOT que contiene todos los nodos:
Todo nodo que tenga parentId debe estar anidado dentro de su padre, y eso es lo que hacemos con el método generateTree del componente TreeView.
Si te fijas, este componente ejecuta un bucle con los datos del árbol contra el componente TreeNode, pero claro, un simple bucle no puede mostrar todos los nodos con una profundidad ilimitada.
Crear el componente TreeNode (Children)
Para entender cómo se muestran todos los nodos del árbol con un bucle infinito veamos el contenido del componente TreeNode, puedes creer que sólo tiene 17 líneas de código :), y no necesitamos más.
¡Esa es la clave! Llamar de forma recursiva al componente TreeNode, con eso, siempre que el nodo actual tenga datos en su propiedad children, volveremos a crear una instancia de TreeNode, de esta forma podemos generar un árbol de componentes con una profundidad ilimitada en Vuejs 2.