Javascript 如何在vue 3的同一个表中显示递归laravel有许多关系

在Vuejs 3中，如何显示一个在同一个表名

子组
和
组
中有许多关系数据的Laravel递归

我有Laravel API和SPA Vuejs 3。我有一个表
labitems
，它有
实验室组
，
实验室子组
和
实验室项
。数据库表的列有
id
、
name
、
lab\u item\u id
和
unit
<代码>实验室项目id
是同一表格的fk

控制器：

public function index()
{
    $labitems = LabItem::whereNull('lab_item_id')
        ->with('allChildren')
        ->get();

    return response()->json([$labitems]);
}

型号：

public function children(){
    return $this->hasMany(LabItem::class, 'lab_item_id');
}

public function allChildren(){
    return $this->hasMany(LabItem::class)->with('children');
}

我得到的数据如下：

data() {
    return {
        labitems:{},
    }
},
computed() {
    this.$axios.get('/api/labitems')
        .then(response => {
            this.labitems = response.data;
            console.log(response.data)
        })
        .catch(function (error) {
            console.error(error);
        });
}

[
[
{
“id”：1，
“创建人”：1，
“名称”：“尿液分析”，
“单位”：“na”，
“实验室项目id”：空，
“所有儿童”：[
{
“id”：3，
“创建人”：1，
“名称”：“白细胞”，
“单位”：空，
“实验室项目id”：1，
“儿童”：[]
}
]
},
{
“id”：2，
“创建人”：1，
“名称”：“蛋白尿”，
“单位”：“不适用”，
“实验室项目id”：空，
“所有儿童”：[
{
“id”：4，
“创建人”：1，
“名称”：“尿白蛋白”，
“单位”：“mg/dl”，
“实验室项目id”：2，
“儿童”：[]
}
]
},
{
“id”：5，
“创建人”：1，
“姓名”：“血液调查”，
“单位”：空，
“实验室项目id”：空，
“所有儿童”：[
{
“id”：6，
“创建人”：1，
“名称”：“生物化学”，
“单位”：空，
“实验室项目id”：5，
“儿童”：[
{
“id”：7，
“创建人”：1，
“名称”：“Sugar R”，
“单位”：“mg/dl”，
“实验室项目id”：6
}
]
}
]
}
]
]

在Vue视图上检索上述数据时，我有如下所示：

data() {
    return {
        labitems:{},
    }
},
computed() {
    this.$axios.get('/api/labitems')
        .then(response => {
            this.labitems = response.data;
            console.log(response.data)
        })
        .catch(function (error) {
            console.error(error);
        });
}

我可以像这样访问数据

<tr v-for="(labitem, index) in labitems" :key="labitem.id">
<td>{{ labitem[2].all_children[0].children[0].name }}</td>
...
</tr>


{{labitem[2]。所有子项[0]。子项[0]。名称}
...

输出是Sugar R。那么如何在名为group的表中显示

我希望看到下面这样的结果

S.N
测试名称
小组/分组
单元
行动
1.
尿液分析
没有一个
无效的
添加/编辑/删除
2.
白细胞
尿液分析
无效的
添加/编辑/删除
3.
血液调查
没有一个
无效的
添加/编辑/删除
4.
生物化学
血液调查
无效的
添加/编辑/删除
5.
糖浆
生物化学
毫克/分升
添加/编辑/删除
为什么投反对票？我需要一个解决方案。