Vue递归List组件嵌套父子结构数据子节点无法显示问题求助

问题根因 #

• 递归调用List组件时传参类型不匹配：List组件顶层使用v-for="(item, index) in items"遍历items，默认要求items是数组，但你递归时传入的itemD是单个对象（children数组里的每个元素都是单个节点对象），导致v-for遍历对象的键值对而非节点，自然无法正常渲染数据
• 错误代码冗余：count是数字类型，不存在length属性，{{count.length}}会抛出运行时错误，干扰正常渲染

修复方案 #

1. 调整递归传参格式 #

把递归调用时的:items="itemD"改为:items="[itemD]"，将单个节点对象包裹成数组，和顶层父组件的传参格式保持一致，改动最小。

2. 修正count输出逻辑 #

把{{count.length}}改为{{count}}，避免类型错误。

3. 可选优化：过滤空节点 #

你的数据中存在空对象{}节点，可增加判断过滤，避免渲染无效空行。

修改后的List.vue完整代码 #

<template>
    <div>
        <div v-for="(item, index) in items" :key="index" >
            <!-- 过滤空对象节点 -->
            <div v-if="item && item.data != null " >
                <template v-if="Object.keys(item.data).length > 0">
                    <template v-for="(dataItem, dataIndex) in item.data" :key="dataIndex">
                    <v-simple-table>
                        <thead>
                            <tr class="d-flex flex-row">
                            {{ '░'.repeat(count) }} {{count}} {{ dataItem['name'] }}
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </v-simple-table>
                    </template>
                </template>
            </div>
            <div v-if="item && item.children != null " >
                <template v-if="Object.keys(item.children).length > 0">
                    <template v-for="(itemD, indexD) in item.children" :key="indexD" >
                        <!-- 把单个节点包裹成数组传入子组件 -->
                        <List :items="[itemD]" :count="count + 1" />
                    </template>
                </template>
            </div>
        </div>         
    </div>
</template>

<script>
export default {
    name: 'List',
    props: {
        items: {
            type: [Array, Object],
            default: () => [],
        },
        count: {
            type: Number,
            default: 1
        }
    },
}
</script>

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