Aquí está la tabla b, mostrará una columna de alimentos
<b-table :fields="Fields" :items="ITEMS"> <template #cell(food)="data"> {{data.item.food}} </template> </b-table> //The column Fields() { return [{key: 'food', label: 'food'}]; }Actualmente los datos se ven así:
[ { "food": "taco" }, { "food": "burrito" } ]Escribe todos los valores en una sola columna en la tabla.
Necesito la tabla para poder manejar datos que se vean así
[ { "foods": [ { "food": "taco" }, { "food": "burrito" } ] }, { "foods": [ { "food": "soup" }, { "food": "rice" } ] } ] //The column, probably not correct but I'm trying to get it to read every "food" under all "foods" Fields(){ return [{key: 'foods.food', label: 'food'}]; },Esto escribiría los datos en la tabla igual que antes, en una columna.
<!-- Everytime a "foods" array is found, loop through all the food items that it holds --> <b-table :fields="Fields" :items="ITEMS"> <template #cell(foods)="data"> <div v-for="entry in data.item.foods" :key="entry.food"> <!-- **THIS TEMPLATE DOES NOT WORK, but if it did then it would count as a solution!** --> <template #cell(food)="data"> {{food}} </template> </div> </template> </b-table>Para obtener una tabla de una sola columna con una lista de nombres de alimentos, la tabla bootstrap-vue quiere que los datos se vean así...
fields: ['food'], items: [ { food: "taco" }, { food: "soup" }, // ... ]Creo que entiendo del OP (gracias por las ediciones) que los datos de origen se ven diferentes. El trabajo, entonces, es transformar los datos de origen en lo que necesita la tabla. Esto se puede hacer mejor con un apoyo calculado. El beneficio es que la transformación se almacenará en caché y permanecerá reactiva a los cambios en los datos de origen.
Esto es todo lo que necesita para convertir los datos descritos en el OP en los datos que necesita la tabla:
computed: { items() { // presuming source data is available and in the OP format return this.sourceData.map(d => d.foods).flat() }, }Aquí hay una demostración de ese cálculo funcionando:
window.onload = () => { new Vue({ el: '#app', data: function() { return { sourceData: [], fields: [{ key:'food', label:'The Foods' } ] } }, mounted() { this.sourceData = [ { foods: [ { food: "taco"}, { food: "burrito"} ] }, { foods: [ { food: "soup"}, { food: "rice"} ] }, ]; }, computed: { items() { return this.sourceData.flatMap(d => d.foods); } }, }) } <script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@2.0.0-rc.27/dist/bootstrap-vue.js"></script> <link rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.0.0-rc.27/dist/bootstrap-vue.css"/> <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css"/> <div id="app"> <b-table :items="items" :fields="fields"/> </div>Esto escribiría los datos en la tabla igual que antes, en una columna.
Para lograr esto, su matriz de items debe ser una matriz plana. Por lo tanto, puede convertir la matriz de entrada en una matriz plana primero en el gancho del ciclo de vida de mounted() y luego enlazar en la <v-table> .
demostración :
window.onload = () => { new Vue({ el: '#app', data() { return { fields: [{key: 'food', label: 'food'}], items: [ { "foods": [ { "food": "taco" }, { "food": "burrito" } ] }, { "foods": [ { "food": "soup" }, { "food": "rice" } ] } ] } }, mounted() { this.items = this.items.map(d => d.foods).flat(); } }) } <script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@2.0.0-rc.27/dist/bootstrap-vue.js"></script> <link rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.0.0-rc.27/dist/bootstrap-vue.css"/> <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css"/> <div id="app"> <b-table :items="items" :fields="fields"> </b-table> </div>