This is the b-table, designed to display a column of food items
<b-table :fields="Fields" :items="ITEMS">
<template #cell(food)="data">
{{data.item.food}}
</template>
</b-table>
//Column Setup
Fields() {
return [{key: 'food', label: 'food'}];
}
The current data format looks like this:
[
{
"food": "taco"
},
{
"food": "burrito"
}
]
It displays the values in a single column on the table.
What I need
I want the table to be capable of handling data in this format
[
{
"foods": [
{
"food": "taco"
},
{
"food": "burrito"
}
]
},
{
"foods": [
{
"food": "soup"
},
{
"food": "rice"
}
]
}
]
//Column Update, may not be accurate but attempting to iterate through all "food" under each "foods"
Fields(){
return [{key: 'foods.food', label: 'food'}];
},
This would present the data in the table the same as before, in one column.
Close to Success!
<!-- When encountering a "foods" array, iterate through all food items it contains -->
<b-table :fields="Fields" :items="ITEMS">
<template #cell(foods)="data">
<div v-for="entry in data.item.foods" :key="entry.food">
<!-- **THIS TEMPLATE IS NOT FUNCTIONAL, but if it were, it would be a solution!** -->
<template #cell(food)="data">
{{food}}
</template>
</div>
</template>
</b-table>