en mi proyecto tengo datos de JSON API y quería ver el índice de cada dato... por ejemplo, a continuación vi los pisos del índice de matriz numerado del 0 al 22 pero cuando se trata de ver pisos en cada piso no pude Para obtener el índice de la matriz, a continuación para el piso 0, tengo 6 matrices para pisos hasta el 22, todos tienen una matriz (6) de pisos, así que quería verlos del 0 al 6 para cada piso, pero no pude. alguien puede ayudar en esto por favor?
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>¿Está tratando de obtener solo el sexto elemento de los 22 en su matriz o cada uno de los 22 elementos en sí mismos tiene una matriz de 6 elementos? tratando de seguir exactamente lo que estás tratando de hacer.
editar: creo que podría obtener lo que estás tratando de hacer. No puedo probar esto por mi parte, pero esto es esencialmente lo que debe hacer para obtener una matriz dentro de otra matriz. simplemente ejecuta otro bucle v-for a través del v-for anterior.
prueba esto.
editar: debe estar en el piso, no en 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>algunas otras formas de desglosar las cosas aún más son así. esto mostrará los pisos (o cualquier otro elemento que tenga en esa matriz).
<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>también puede mostrar un índice específico como este. algunos ejemplos.
{{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 5etc.