Need to Access Item Index in Bootstrap Vue Table when doing a loop - vuejs2

Question

I have a Bootstrap-Vue parent b-table running for loop on bids. Each bid also has items.
Initially it shows each bid on each row.
When that row is clicked it shows a child table that has every bid items.
So a child table inside <template slot="hidden-details> tries to
loop through bid.items to display those items for each bid.
Since I am unable to get earlier bid loop indexes I cannot run this
nested loop unless I manually set it like: :items="bid[0].items
Script
new Vue({
el: '#app',
data:{
bids: [{
id: "Bid Number One",
item: [{
item_number: 11,
item_text: "Item 1 Comment 1",
code: "1",
},
{
item_number: 22,
item_text: "Item 1 Comment 2",
code: "2",
}
]
},
{
id: "Bid Number Two",
item: [{
item_Number: 33,
item_text: "Item 2 Comment 3",
code: "3",
},
{
item_Number: 44,
item_text: "Item 2 Comment 4",
code: "4",
}
]
}
],
bidHeaderFields:[
{key:"id", label: "Header"},
],
bidIndex: 0,
},
methods: {
showBidItems(bids, index) { // Here I receive row index from #row-clicked
this.bids[index]._showDetails = !this.bids[index]._showDetails;
this.bidIndex = index; // I change the value of bidIndex to row-clicked index
},
}
})
This JSFiddle has the table code.

Answer 1

The complete row's item data is available in the scoped details slot. If the bid details are a sub-array of the item, you can just pass that array to the child b-table:
<b-table :items="bids" :fields="..." ... >
<template slot="row-details" slot-scope="{ item }"> // item === 'bid' row data
// item.item === the rows 'item' array
<b-table :items="item.item" :fields="..."></b-table>
</template>
</b-table>