uniapp折叠框二级循环

uni-collapse

在做微信小程序时用collapse踩了一些坑

直接使用二级循环

每个折叠框都出现了同样的item

尝试过的解决方案

导入子组件，传值

but 子组件渲染不出来

判断是否选中，更新二级列表

该方案能够实现点哪个展哪个
but由于我的二级列表数据来自于http请求
异步请求会导致二级列表还没更新就被渲染上去了

判断时候选择，增加二级列表

请求数据时往二级列表里面加数据
使用二维数组，根据传入的一级列表index定位
该方案能够解决问题

效果

搭配上sroll-view就很优雅了

code

<uni-collapse ref="collapse"  @change="change" accordion>
	<uni-collapse-item  :title="chapterTitle.chapterName" v-for="(chapterTitle,index) in chapterTitle"  :key="index">
		<view  class="chapter-item" v-for="chapter in chapterList[index]" @click="practice(chapter.id)">
			{{chapter.chapterName}}
		</view>
	</uni-collapse-item>
</uni-collapse>

data来自于http请求，这里就不贴出了
若item显示不完全可以尝试加高height
chapterList结构长这样

chapterList:{
		0: {id: "20191220171143-cd77f29b-af99-4567-8927-819e843e8856", chapterName: "计算机系统知识",…}
		1: {id: "20191220171426-8141a731-3288-4c46-8ca0-41e483d7dd70", chapterName: "网络技术", questionCount: "427",…}
		2: {id: "20191220171533-c31971ab-94b3-4f54-b63d-ed486f7fef53", chapterName: "网络安全", questionCount: "120",…}
		3: {id: "20191220171557-f18508b3-cb9d-43f3-b51b-87e8c3bc03ef", chapterName: "计算机专业英语",…}
		4: {id: "20191220171612-4e8ce865-214a-4fbc-b5d2-7e96123f0277", chapterName: "综合练习1", questionCount: "192",…}
		5: {id: "1604720458908-a57f0465-c532-4d7d-a52c-4b15ab33346d", chapterName: "综合练习2", questionCount: "196",…}
		6: {id: "1604720488623-6c832709-341c-4bbf-87ba-816aefbb9e2b", chapterName: "综合练习3", questionCount: "193",…}
		7: {id: "1604720513029-690aa330-f860-402a-b492-a7257996db34", chapterName: "综合练习4", questionCount: "184",…}
		8: {id: "1604720538555-c0040824-8e9e-4d33-8cb9-1b476a03fbec", chapterName: "综合练习5", questionCount: "99",…}
	}

用index去索引的用数组也行