I have a project that includes data from a JSON API and I'm trying to display the index of each data. For example, I can view the floors from array index 0 to 22, but I'm having trouble getting the array index for the flats on each floor. Each floor has 6 arrays representing different flats, with each array containing 6 flats. I want to be able to view them from 0 to 6 for each floor, but I'm unable to do so. Can anyone please help me with this?
https://i.sstatic.net/aWzCj.png
<template>
<b-card no-body class="bg-default shadow">
<b-table-simple responsive>
<b-thead>
<b-tr>
<b-th sticky-column>flats </b-th>
<b-th > //here i want to show the indexes of array(6) in provided image
</b-th>
</b-tr>
</b-thead>
<b-tbody >
<b-tr v-for="(floor,floor_index) in Building.floors"
:key="floor_index">
<b-th sticky-column>{{floor_index}}</b-th> //here i viewed from 0 to 22 floors
<b-td>Cell</b-td>
</b-tr>
</b-tbody>
</b-table-simple>
</b-card>
</template>
<script>
import projects from './../projects'
import { Table, TableColumn} from 'element-ui'
import BuildingsService from "@/services/ApiService"
export default {
name:<br>'light-table',
components: {
},
data() {
return {
Flats:[],
index:0,
Floors:[],
Building:[],
NoOfFloors: [],
projects,
currentPage: 1
};
},
mounted: function(){
BuildingsService.getOneBuilding(`${this.$route.params.id}`).then((response) => {
this.Building = response.data.response;
this.NoOfFloors = this.Building.floors;
console.log(this.Building.floors,"single");
});
BuildingsService.getFlats().then((response) => {
this.Flats = response.data.response;
});
}
}
</script>