how are you? I come to bring you a problem that I have, that I cannot solve. It turns out that I have an api in net core that returns me the areas on the one hand and on the other hand I have the funds, which means that an area can have several funds, therefore I need to make a grid grouped by area but I have the problem that I only brings one and I can not find the solution. If you see the methods that I call to obtain the information, it only lists the areas and funds Could you help me?enter image description here
<script>
import useAreasApi from '@/Services/home/Areas/useAreas'
import useFondosApi from '@/Services/home/Areas/Fondo/useFondos'
export default {
data: () => ({
search: '',
fondos: [],
expanded: [],
togglers: {},
headers: [
{ text: 'areaId', align: 'left', value: 'areaId' },
{ text: 'Codigo', value: 'id' },
{ text: 'Fondo', value: 'nombre' },
],
}),
mounted () {
const { getAreas } = useAreasApi()
const { getFondos } = useFondosApi()
getAreas().then(responseArea => {
this.areas = responseArea
responseArea.forEach(area => {
getFondos(area.id).then(responseFondo => {
this.fondos = responseFondo.map((item) => {
console.log(item)
return {
details: {
location: null
},
id: item.id,
nombre: item.nombre,
areaId: item.areaId,
item
}
})
// console.log(this.fondos)
})
})
})
},
methods: {
toggleAll () {
Object.keys(this.$refs).forEach(k => {
//console.log(this.$refs[k])
this.$refs[k].$el.click()
})
},
closeAll () {
Object.keys(this.$refs).forEach(k => {
console.log(this.$refs[k])
if (this.$refs[k] && this.$refs[k].$attrs['data-open']) {
this.$refs[k].$el.click()
}
})
},
openAll () {
Object.keys(this.$refs).forEach(k => {
if (this.$refs[k] && !this.$refs[k].$attrs['data-open']) {
this.$refs[k].$el.click()
}
})
}
}
}
</script><template>
<v-container>
<h2>Gestion Fondos</h2>
<v-card color="pink lighten-2">
<v-card-title>
<v-text-field
v-model="search"
label="Search"
single-line
hide-details
></v-text-field>
</v-card-title>
<v-card-text>
<v-btn @click="toggleAll()">Toggle Groups</v-btn>
<v-btn @click="closeAll()">Cerrar Todo</v-btn>
<v-btn @click="openAll()">Abrir Todo</v-btn>
</v-card-text>
<v-data-table
:headers="headers"
:items="fondos"
:expanded.sync="expanded"
item-key="id"
:search="search"
group-by="areaId"
@click:row="(item, slot) => slot.expand(!slot.isExpanded)"
>
<template v-slot:group.header="{ group, headers, toggle, isOpen }">
<td :colspan="headers.length">
<v-btn @click="toggle" small icon :ref="group" :data-open="isOpen">
<v-icon v-if="isOpen">mdi-chevron-up</v-icon>
<v-icon v-else>mdi-chevron-down</v-icon>
</v-btn>
{{ group }}
</td>
</template>
<template v-slot:expanded-item="{ headers, item }">
<td :colspan="headers.length">
<div class="row">
<div class="col-auto">
<v-img avatar class="mx-4"></v-img>
</div>
<div class="col">
<h6>Details</h6>
... {{ item.nombre }}
</div>
</div>
</td>
</template>
</v-data-table>
</v-card>
</v-container>
</template>