更改数据时 vue3 块树不 "reload"

Question

我正在寻找 vue 3 的组织结构图插件，但我只找到了这个

https://github.com/megafetis/vue3-blocks-tree

我遇到的问题是在更改 ref treeData 变量时图表未加载新结构。

我想动态加载图表。当获取数据时图表加载新数据并显示它。

这是codesandbox的例子：

https://codesandbox.io/s/flamboyant-gwen-o8vp9?file=/src/App.vue

当按下添加时...treeData 参考变量应该加载新数据和图表来显示它...但它没有。

有什么想法吗？

我应该在每次获取时重新加载组件吗？

Answer 1

尝试使用记录的方式使 treeData 反应。

将 ref 替换为 reactive 以获得 treeDate 定义。在 onAddData 上更改 treeData 的部分内容，而不是替换所有对象。

完整更改示例：

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：通过添加 Object.assign.

更改 onAddData 上的代码

更改数据时 vue3 块树不 "reload"

vue3 blocks tree does not "reload" when changing the data

javascript

vuejs3