Estoy buscando un complemento de organigrama para vue 3 y solo he encontrado este
https://github.com/megafetis/vue3-blocks-tree
El problema que tengo es que al cambiar la variable ref treeData , el gráfico no carga la nueva estructura.
Quiero cargar dinámicamente el gráfico. Cuando obtenga los datos, el gráfico cargará los nuevos datos y los mostrará.
Aquí está el ejemplo de codesandbox:
https://codesandbox.io/s/flamboyant-gwen-o8vp9?file=/src/App.vue
Cuando presione Agregar... la variable de referencia treeData debería cargar los nuevos datos y el gráfico para mostrarlo... pero no lo hace.
Algunas ideas ?
¿Debo volver a cargar el componente en cada recuperación?
Intente utilizar la forma documentada de hacer que treeData sea reactivo.
Reemplace ref a reactive para la definición de treeDate . Cambie partes de treeData en onAddData en lugar de reemplazar todos los objetos.
Ejemplo completamente modificado:
import { reactive } from "vue"; import VueBlocksTree from "vue3-blocks-tree"; import "vue3-blocks-tree/dist/vue3-blocks-tree.css"; export default { name: "Diagram", components: { VueBlocksTree }, setup() { let treeData = reactive({ label: "root", children: [ { label: "child 1" }, { label: "child 2" }, { label: "subparent 1", children: [ { label: "subchild 1" }, { label: "subchild 2", children: [{ label: "subchild 11" }, { label: "subchild 22" }], }, ], }, ], }); // let treeData = ref({}); const onAddData = () => { Object.assign(treeData, { label: "Test", children: [{ label: "Test 1" }, { label: "Test 2" }] }); }; return { treeData, onAddData, }; }, }; UPD: cambie el código en onAddData agregando Object.assign .