in my project i have data from JSON API and i wanted to view the index of each data.. for example, below i viewed the floors from array index numbered from 0 to 22 but when it comes to view flats in each floor i couldn't get the array index, below for floor 0 i have 6 arrays for flats until 22 all have array(6) of flats so i wanted to view them from 0 to 6 for each floor but i couldn't. can someone help in this please?
https://i.stack.imgur.com/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: '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>are you trying to get just the 6th item out of the 22 in your array or does each of the 22 items in and of themselves have a 6 item array? trying to follow exactly what you're trying to do.
edit: i think i might get what you're trying to do. i cant test this on my end, but this is essentially what you need to do to get an array inside of another array. you just run another v-for loop through the v-for before it .
try this.
edit: should be in floor, not floor_index
<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-tr v-for="(floor,floor_index) in Building.floors"
:key="floor_index">
<div v-for="(flat, index) in floor) :key="index">
<b-th>{{flat}}</b-th>
</div>
</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>
some other ways to break things down further is like this. this will show the flats (or whatever other items you have in that array).
<b-tbody >
<b-tr v-for="(floor,floor_index) in Building.floors"
:key="floor_index">
<b-th sticky-column>{{floor.flats}}</b-th> //here i viewed from 0 to 22 floors
<b-td>Cell</b-td>
</b-tr>
</b-tbody>
you can also show a specific index like this. some examples.
{{floor[5]}} //or whatever index you want 0 to 5
{{floor.flats[2]}} //or whatever index you want 0 to 5
{{floor.flats.rooms[1]}} //or whatever index you want 0 to 5
etc.