vue2-org-tree报错，TypeError: Cannot read properties of undefined (reading 'children')？

Question

vue2-org-tree报错，TypeError: Cannot read properties of undefined (reading 'children')？

qngyun1029

95832188268

发布于
10 月 22 日广东

网上下了一个关于vue2-org-tree组件的demo，可以正常跑起来，但是把代码组件页面原本搬到项目中，怎么也跑不起来，确认了vue版本都是2.6.11，但是一直报错，错误信息如下：

`

OrgTree.vue 代码如下：

<template>
  <div class="org-tree">
    <vue2-org-tree
      :horizontal="false"
      :data="data"
      collapsable
      :render-content="renderContent"
      :label-class-name="labelClassName"
      @on-expand="onExpand"
    />
  </div>
</template>

<script>

export default {
  name: "OrgTree",
  data() {
    return {
      data: {},
      labelClassName: "bg-color-blue",
    };
  },
  created() {},
  methods: {
    collapse(list) {
      list.forEach(child => {
        if (child.expand) {
          child.expand = false;
        }
        child.children && this.collapse(child.children);
      });
    },
    onExpand(e, data) {
      console.log(data, "data");
      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },
    toggleExpand(data, val) {
      if (Array.isArray(data)) {
        data.forEach(item => {
          this.$set(item, "expand", val);
          if (item.children) {
            this.toggleExpand(item.children, val);
          }
        });
      } else {
        this.$set(data, "expand", val);
        if (data.children) {
          this.toggleExpand(data.children, val);
        }
      }
    },
    renderContent(h, data) {
      return <div class="treeItem">1--{data.label}</div>;
    },
  },
  mounted() {
    this.data = {
      label: "江苏XX",
      value: "-1",
      children: [
        {
          value: "reqjfxqfzr",
          label: "需求室负责人",
          children: [
            {
              label: "任通",
              value: "1000035939",
            },
            {
              label: "林萍",
              value: "23000068",
            },
            {
              label: "王庆安",
              value: "23000079",
            },
          ],
        },
        {
          value: "req_fzr_kf",
          label: "开发室负责人",
          children: [
            {
              label: "任通",
              value: "1000035939",
            },
            {
              label: "林萍",
              value: "23000068",
            },
            {
              label: "王庆安",
              value: "23000079",
            },
          ],
        },
        {
          value: "req_fzr_dsj",
          label: "大数据室负责人",
          children: [
            {
              label: "任通",
              value: "1000035939",
            },
            {
              label: "林萍",
              value: "23000068",
            },
            {
              label: "王庆安",
              value: "23000079",
            },
          ],
        },
        {
          value: "req_fzr_bas",
          label: "经分室负责人",
          children: [
            {
              label: "任通",
              value: "1000035939",
            },
            {
              label: "林萍",
              value: "23000068",
            },
            {
              label: "王庆安",
              value: "23000079",
            },
          ],
        },
        {
          value: "reqownerinfo",
          label: "信息化室负责人",
          children: [
            {
              label: "任通",
              value: "1000035939",
            },
            {
              label: "林萍",
              value: "23000068",
            },
            {
              label: "王庆安",
              value: "23000079",
            },
          ],
        },
        {
          value: "reqownerinfo-aq",
          label: "安全室负责人",
          children: [
            {
              label: "任通",
              value: "1000035939",
            },
            {
              label: "林萍",
              value: "23000068",
            },
            {
              label: "王庆安",
              value: "23000079",
            },
          ],
        },
      ],
    };
    this.toggleExpand(this.data, true);
  },
};
</script>

<style lang="scss">
.bg-color-blue {
  color: #ffffff;
  background-color: skyblue;
}
</style>

vue.js

阅读 863

AI BotBETA

错误 TypeError: Cannot read properties of undefined (reading 'children') 通常意味着在访问某个对象的 children 属性时，该对象实际上是 undefined。在你的代码中，这个问题可能发生在几个地方，但最常见的是在 vue2-org-tree 组件的渲染过程中。

首先，从你提供的代码来看，你在 mounted 钩子中初始化了 data 并调用了 toggleExpand 方法来设置每个节点的 expand 属性。然而，问题可能并不在这里，因为当你第一次渲染组件时，data 已经被正确设置。

问题可能出在 vue2-org-tree 组件的内部实现中，或者在你的 renderContent 方法中。但是，根据错误信息，更可能是 vue2-org-tree 在处理数据时遇到了一个未定义的节点。这可能是因为数据结构在渲染过程中被意外修改，或者组件内部没有正确处理空或未定义的数据。

不过，从你提供的代码来看，有一个潜在的问题点可能需要注意：

初始 data 结构：你在 data 函数中初始化了 data 为一个空对象 {}，但在 mounted 钩子中才将其设置为实际的树结构。这本身不是问题，但如果在 vue2-org-tree 组件的渲染过程中（在 mounted 钩子执行之前），它尝试访问 data.children，那么它将遇到 undefined。然而，这通常不是 Vue 渲染流程中的问题，因为 Vue 会在 mounted 钩子执行后重新渲染组件。
renderContent 方法：你的 renderContent 方法使用了 JSX 语法（虽然你在 <script> 标签中没有声明 lang="jsx" 或类似的，但 Vue 通常通过 Babel 插件支持 JSX）。这个方法本身看起来没有问题，但请确保你的项目配置支持 JSX。如果 JSX 转换不正确，可能会导致意外的行为。
vue2-org-tree 组件的内部逻辑：如果上述都不是问题所在，那么很可能是 vue2-org-tree 组件在处理数据时存在缺陷。你可能需要查看该组件的源代码或文档，以了解它如何处理空或未定义的数据。

为了解决这个问题，你可以尝试以下步骤：

确保你的项目配置支持 JSX（如果你正在使用它）。
检查 vue2-org-tree 组件的文档和源代码，看是否有关于如何处理空或未定义数据的说明。
在 vue2-org-tree 组件的 props 中添加一些防御性编程，例如检查 data 和 data.children 是否为 undefined，并在需要时提供默认值。
尝试在 vue2-org-tree 组件的外部添加一些日志输出，以查看在渲染过程中 data 的实际状态。

如果上述步骤都不能解决问题，你可能需要联系 vue2-org-tree 组件的维护者或在相关社区中寻求帮助。

1 个回答

得票最新

Seven

618116

发布于
10 月 22 日北美地区

根据错误信息和你的代码，问题出在尝试读取 children 属性时，该属性未定义。以下是修复代码的建议：

在数据初始化时，确保每个节点都有 children 属性，即使是空数组。
在访问 children 属性之前，先检查该属性是否存在。

<template>
  <div class="org-tree">
    <vue2-org-tree
      :horizontal="false"
      :data="data"
      collapsable
      :render-content="renderContent"
      :label-class-name="labelClassName"
      @on-expand="onExpand"
    />
  </div>
</template>

<script>
export default {
  name: "OrgTree",
  data() {
    return {
      data: {},
      labelClassName: "bg-color-blue",
    };
  },
  created() {},
  methods: {
    collapse(list) {
      list.forEach(child => {
        if (child.expand) {
          child.expand = false;
        }
        if (child.children) {
          this.collapse(child.children);
        }
      });
    },
    onExpand(e, data) {
      console.log(data, "data");
      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },
    toggleExpand(data, val) {
      if (Array.isArray(data)) {
        data.forEach(item => {
          this.$set(item, "expand", val);
          if (item.children) {
            this.toggleExpand(item.children, val);
          }
        });
      } else {
        this.$set(data, "expand", val);
        if (data.children) {
          this.toggleExpand(data.children, val);
        }
      }
    },
    renderContent(h, data) {
      return <div class="treeItem">1--{data.label}</div>;
    },
  },
  mounted() {
    this.data = {
      label: "江苏XX",
      value: "-1",
      children: [
        {
          value: "reqjfxqfzr",
          label: "需求室负责人",
          children: [
            {
              label: "任通",
              value: "1000035939",
              children: [] // 确保每个节点都有 children 属性
            },
            {
              label: "林萍",
              value: "23000068",
              children: []
            },
            {
              label: "王庆安",
              value: "23000079",
              children: []
            },
          ],
        },
        {
          value: "req_fzr_kf",
          label: "开发室负责人",
          children: [
            {
              label: "任通",
              value: "1000035939",
              children: []
            },
            {
              label: "林萍",
              value: "23000068",
              children: []
            },
            {
              label: "王庆安",
              value: "23000079",
              children: []
            },
          ],
        },
        {
          value: "req_fzr_dsj",
          label: "大数据室负责人",
          children: [
            {
              label: "任通",
              value: "1000035939",
              children: []
            },
            {
              label: "林萍",
              value: "23000068",
              children: []
            },
            {
              label: "王庆安",
              value: "23000079",
              children: []
            },
          ],
        },
        {
          value: "req_fzr_bas",
          label: "经分室负责人",
          children: [
            {
              label: "任通",
              value: "1000035939",
              children: []
            },
            {
              label: "林萍",
              value: "23000068",
              children: []
            },
            {
              label: "王庆安",
              value: "23000079",
              children: []
            },
          ],
        },
        {
          value: "reqownerinfo",
          label: "信息化室负责人",
          children: [
            {
              label: "任通",
              value: "1000035939",
              children: []
            },
            {
              label: "林萍",
              value: "23000068",
              children: []
            },
            {
              label: "王庆安",
              value: "23000079",
              children: []
            },
          ],
        },
        {
          value: "reqownerinfo-aq",
          label: "安全室负责人",
          children: [
            {
              label: "任通",
              value: "1000035939",
              children: []
            },
            {
              label: "林萍",
              value: "23000068",
              children: []
            },
            {
              label: "王庆安",
              value: "23000079",
              children: []
            },
          ],
        },
      ],
    };
    this.toggleExpand(this.data, true);
  },
};
</script>

<style lang="scss">
.bg-color-blue {
  color: #ffffff;
  background-color: skyblue;
}
</style>

这样可以确保每个节点都有 children 属性，避免 TypeError: Cannot read properties of undefined (reading 'children') 错误。

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

被 1 篇内容引用

vue中使用全局mixins导致第三方组件报错，请问如何处理？
2

推荐问题

vue2-org-tree报错，TypeError: Cannot read properties of undefined (reading 'children')？

你尚未登录，登录后可以

不同页面之间可以通过localstorage保存响应式吗？

网站的不同域名互相跳转如何保持登录态？

Vue项目一个报错无法找到原因?

相同的HTML代码，用v-html与直接写在模板中染相表现差异巨大，如何规避？

vite项目如何导入.pem公钥更规范？

使用vue-pdf本地浏览器使用chrome移动机型可以正常预览，但是到了线上就无法正常预览了?

移动端切换路由后返回，视频启动播放会严重滞后，好怪？