我想做一个菜单，菜单有不同的菜系，展开菜系有对应的菜品。
再点击菜品可以跳转页面
我想用云开发实现实时更新数据，不想写死
想实现的效果图
我在数据库录了对应的数据
第一个集合classType用来写菜系
第二个集合foods用来写具体的菜品
wxml 代码
我定义了两个wx:for 感觉问题出在这，但不知道怎么修改
<van-collapse value="{{ activeName }}" bind:change="onChange" accordion
wx:for="{{classType}}" wx:key="_id" >
<van-collapse-item title="{{item.name}}" name="1" >
<van-cell wx:for="{{foods}}" wx:key="_id"
is-link
icon="{{item.icon}}"
title="{{item.name}}"
link-type="navigateTo"
url="{{item.url}}"
/>
</van-collapse-item>
</van-collapse>
JS
// 菜系
db.collection("classType").get().then(res=>{
this.setData({
classType:res.data
})
})
// 菜品
db.collection("foods").get().then(res=>{
this.setData({
foods:res.data
})
})
效果
我只点了一个东北菜，但下面所有的菜系都全部打开了，并且所有菜品都会出现
东北菜里面多了“一品豆腐和油焖大虾”，下面的鲁菜同理
本人小白，求大神指点。我想把菜单的数据写活，但不知道该怎么定义循环数组。
望大神指点迷津，小弟感激不尽！！！
代码片段
https://developers.weixin.qq.com/s/WBrSgumw7GhX
若认为该回答有用，给回答者点个[ 有用 ]，让答案帮助更多的人
onChange(e) 和 idx =e.xxx 该如何修改？
我就是单纯的想把折叠面板和单元格写到一起，并且能用云开发实时修改。望大神救小弟于水火，感激不尽！！！
那你复制我的wxml，然后在onChange(e)里打印e，看看是什么内容
onChange(e){console.log(e)....}不需要有第一个集合。
// 菜系 db.collection("classType").get().then(res=>{ for (let i = 0 ;i<res.data.list;i++){ // XX classType下的菜品 const nowClassType = res.data.list[i].name; await db.collection( "foods").where({classType:nowClassType}).get().then(resFoods=> { res.data.foods = resFoods.list; }); } this.setData({ classType:res.data }) }) }) <van-collapse value="{{ activeName }}" bind:change="onChange" accordion wx:for="{{classType}}" wx:key="_id" > <van-collapse-item title="{{item.name}}" name="1" > <van-cell wx:for="{{item.foods}}" wx:key="_id" wx:item="itemfood" is-link icon="{{itemfood.icon}}" title="{{itemfood.name}}" link-type="navigateTo" url="{{itemfood.url}}" /> </van-collapse-item> </van-collapse>