i Have a Issue in "v-for: loop in side ion-accordion. at the time of show/ hide content, it not work properly.
bellow mention my sample code. I have to loop 2 array for this implementation.
<ion-accordion-group
@change="toggleChange">
<ion-accordion v-for="(item,index) in locationOccupancyList" :key="index">
<ion-item slot="header" color="light">
<ion-label>{{item.locationName}} : {{item.freeSlotCount}} {{ translate("of") }} {{ item.totalSlotCount }} </ion-label>
</ion-item>
<!-- {{item.totalSlotCount}}
<div><ion-icon :icon="layersOutline"></ion-icon> {{ translate("small") }} - {{item.usedSmallCount}} / {{item.totalSmallCount}}</div> -->
<div slot="content" class="ion-padding">
<div v-for="(stotage,index) in item.slots" :key="index">
<div>
<span v-if="stotage.storageTypeId==='5dfb5189-ea71-494c-8109-05ede131392f'" class="listViewLabel">{{translate("storage_types.cooler")}}</span>
<span v-if="stotage.storageTypeId==='1fd1a2eb-e71b-4f74-adb1-c437ec87a261'" class="listViewLabel">{{translate("storage_types.urn")}}</span>
<span v-if="stotage.storageTypeId==='35c2f2d0-fce4-41e3-ba4f-803b722a5b51'" class="listViewLabel">{{translate("storage_types.viewing")}}</span>
<span v-if="stotage.storageTypeId==='fd307cf7-51e8-434d-ad87-232793bd6908'" class="listViewLabel">{{translate("storage_types.freezer")}}</span>
<span v-if="stotage.storageTypeId==='248eedcd-71be-4875-afd4-6dcc6418b3d1'" class="listViewLabel">{{translate("storage_types.coffin")}}</span>
<span v-if="stotage.storageTypeId==='fd307cf7-51e8-434d-ad87-232793bd6910'" class="listViewLabel">{{translate("storage_types.grinder")}}</span>
<span v-if="stotage.storageTypeId==='fd307cf7-51e8-434d-ad87-232793bd6909'" class="listViewLabel">{{translate("storage_types.oven")}}</span>
</div>
<div class="SectionCapacity">
<div><ion-icon :icon="layersOutline"></ion-icon> {{ translate("small") }} - {{stotage.usedSmallCount}} / {{stotage.totalSmallCount}}</div>
<div><ion-icon :icon="layersOutline"></ion-icon> {{ translate("normal") }} - {{ stotage.usedNormalCount}} / {{stotage.totalNormalCount}}</div>
<div><ion-icon :icon="layersOutline"></ion-icon> {{ translate("large") }} - {{stotage.usedLargeCount}} / {{stotage.totalLargeCount}}</div>
</div>
</div>
</div>
</ion-accordion>
</ion-accordion-group>
1 post - 1 participant