更改数据时 vue3 块树不会“重新加载”答案

【问题标题】：vue3 blocks tree does not "reload" when changing the data更改数据时 vue3 块树不会“重新加载”
【发布时间】：2022-01-25 14:03:45
【问题描述】：

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

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

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

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

这里是代码框示例：

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

当按下添加 ...treeData 引用变量应该加载新数据和图表以显示它...但它没有。

有什么想法吗？

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

【问题讨论】：

标签： javascript vuejs3

【解决方案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 上的代码。

【讨论】：

我已经尝试过了，并且看到它有效.....但是我需要将整个对象传递给 treeData ...来自服务器请求的对象
尝试使用Object.assign：const onAddData = () => { Object.assign(treeData, { label: "Test", children: [{ label: "Test 1" }, { label: "Test 2" }] }); };
它似乎在沙箱中工作。我会尝试看看它是否在项目中有效。谢谢你:)