vue循环的问题？

Question

有个问题想请教大佬
场景：我要v-for循环一个数据，数据是通过接口获取到的，但是循环出来的一个子项我想通过这个子项去查数据接口获取另外一个数组再在这个子项下面循环出一个新的列表出来。对于这种情况大佬们有什么好的解决方案
示例代码：
<div v-for='item of items'>

    <p>
        <ul>
            这个列表的循环，通过item.name的值去异步获取接口得到数据subitems再去循环
            <li v-for='subitem of subitems'></li>
        </ul>
    </p>
</div>

Answer 1

对于这种结构真的不敢苟同，这样有几个item就发几次请求subitems。像一楼回答的，需要时候再去拉取数据，这样更加节约资源。
当然如果不想点击拉取，想item渲染时subitems也一起渲染，也不是不可以。
大概思路这样子：

let items = await getItemsData();
let subitems = {};
for(let i=0;i<items.length;i++){
    let name = items.name;
    subitems[name] = await getSubItemsData(name);
}

<div v-for='item of items'>
    <p>
        <ul>
            这个列表的循环，通过item.name的值去异步获取接口得到数据subitems再去循环
            <li v-for='subitem of subitems[item.name]'></li>
        </ul>
    </p>
</div>

Answer 2

可以做成下拉展开的样式，点击下拉时去获取数据