VUE：获取数据但未使用 vueD3tree 显示

Posted 2023-02-23

【中文标题】VUE：获取数据但未使用 vueD3tree 显示

【英文标题】：VUE: data is fetched but not shown with vueD3tree

【发布时间】：2021-03-16 22:57:31

【问题描述】：

我是 Vue 和 VueD3tree 的新手。我正在尝试使用 vued3tree 库和从 API 获取的数据来显示一棵树。当我尝试使用与静态相同的数据时，树完美地显示出来。但是，在获取数据的情况下，created() 函数中的“console.log”会将数据打印为 JSON 字符串，这意味着数据已成功获取。但是没有在树中显示它，只显示了一个代表树根的小圆圈，只有那个圆圈，没有别的。我还收到以下错误：

TypeError：无法读取未定义的属性“x” 在你 (index.js:1) 在 SVGGElement。 (index.js:2) 在 SVGGElement。 (attr.js:29) 在 sn.Ue [as each] (each.js:5) 在 sn.tt [作为 attr] (attr.js:53) 在 o.updateGraph (index.js:2) 在 o。 (index.js:2) 在阵列。 (vue.runtime.esm.js:1980) 在英尺（vue.runtime.esm.js:1906）

如果您可以看一下，这是我的代码，在 ProductTree.vue 文件中：

<template > <div id="tree"> <div>  <div > 
<tree :data="tree"   node-text="title"  layoutType="horizontal"
type="tree"  Duration="0"  style="width:600px; height:600px" ></tree>
</div> </div> </template>

import  tree  from "vued3tree";
export default Vue.extend(
  name: "ProductTree",
  components: 
       tree,
  ,
  data()     
      return      
             tree:
    ;,
async created()
      let response = await Service.getProducts();
      this.tree=this.prepareData(response.data.data);
      console.log(this.tree);
,
methods: 
      prepareData(data)
       ...
       return data;
       ,
      );

在 Products.vue 中，我有：

<div> <ProductTree/> </div>

我认为问题不在于 vued3tree 库或数据本身，而在于绑定数据，我是 Vue 的新手，不知道该怎么做。我错过了什么吗？

【问题讨论】：

组件和数据之间存在命名冲突。我会尝试将数据中的tree 更改为treeData 或组件中声明的以外的其他内容。

@HeriHeheSetiawan 谢谢，我试过了，但没有任何改变

【参考方案1】：

通过在树组件上添加 v-if="dataLoaded" 并将 dataLoaded 属性设置为 true 加载数据来解决问题。另外，我必须使用 json 对象而不是 json 字符串。