Vue递归组件使用v-treeview时读取length属性undefined报错如何解决

• 存在无属性的空节点：你的items数组第二个元素的children数组中包含空对象{}，该对象未定义children、data属性，直接访问属性的length就会触发Cannot read properties of undefined (reading 'length')报错。
• 缺少属性存在性判断：模板中直接写v-if="item.data.length > 0"、v-if="item.children.length > 0"，没有先校验data、children属性是否存在，只要属性为undefined就会抛出错误。
• v-treeview数据源绑定错误：你在computed中封装了符合treeview结构的itemsC数组，但模板里v-treeview的:items绑定的还是原始props传入的items，未使用处理后的规范结构，导致树节点解析异常。
• 父组件注册错误：父组件import的组件名为EstructRecursive，但components选项里注册的是Estruct，组件名不匹配会导致递归组件渲染失败。
• 字段名与取值逻辑错误：模板中渲染写的是{{ item.data.name }}，但接口返回的字段为nombre，且data本身是数组，需要取下标0才能拿到对应数据对象，取值逻辑错误会导致展示异常。

1. 模板增加属性存在性判断
   如果你的Vue版本支持可选链语法，将两个判断修改为：

<div v-if="item?.data?.length > 0">

<template v-if="item?.children?.length > 0">

如果不支持可选链，修改为前置判断写法：

<div v-if="item.data && item.data.length > 0">

<template v-if="item.children && item.children.length > 0">

2. 修正v-treeview的数据源绑定
   将v-treeview的属性从:items="items"修改为:items="itemsC"，使用computed处理后的规范树结构数据。

3. 修正父组件的组件注册
   将父组件的components配置修改为：

components: { EstructRecursive }

保持引入名、注册名、模板中使用的组件名三者一致。

4. 修正字段取值逻辑
   将渲染名称的代码修改为：

<div >{{ item.data[0].nombre }}</div>

适配接口返回的数组结构和nombre字段名。

5. 清理无效空节点（可选）
   你可以在接口拿到数据后，过滤掉children中的空对象，也可以在computed的itemsC逻辑中增加过滤规则，避免无效节点进入渲染流程。

内容的提问来源于stack exchange，提问作者Jonh wick