-2

Estou desenvolvendo uma pagina web em VueJs com vuetify que busca os dados de uma api e exibe numa tabela "v-data-table", cheguei numa parte que preciso exibir mais de uma informações de um array dentro de outro array e travei kkkk.

Os dados chegam dessa forma:

"content": [
        {
            "id": 5,
            "nome": "Zabbix-Server",
            ........
            "status": {
                "id": 2,
                "nome": "NORMAL"
            },
            "grupos": [
                {
                    "id": 6,
                    "nome": "GESIS"
                }
            ],
            "ambientes": [],
            "responsaveis": [
                {
                    "id": 13,
                    "nome": "WAGNER DA SILVA BORGES",
                }
            ],
            "servicos": [
                {
                    "id": 168,
                    "nome": "zabbix",
                },
                {
                    "id": 168,
                    "nome": "teste",
                },
                {
                    "id": 168,
                    "nome": "teste1",
                },
            ],
            "sistemas": [
                {
                    "id": 172,
                    "nome": "zabbix"
                }
            ]
        },
        {
            "id": 338,
            "nome": "wxp-ts-GDP-01",
            ..........
            "status": {
                "id": 2,
                "nome": "NORMAL"
            },
            "grupos": [
                {
                    "id": 5,
                    "nome": "GESINF"
                }
            ],
            "ambientes": [
                {
                    "id": 1,
                    "nome": "PRODUÇÃO"
                }
            ],
            "responsaveis": [
                {
                    "id": 12,
                    "nome": "EDUARDO FERNANDES BRITO",
                }
            ],
            "servicos": [
                {
                    "id": 150,
                    "nome": "Terminal GDP",
                }
            ],
            "sistemas": []
        },
        {
            "id": 179,
            "nome": "wwwFS (1)",
            ..........
            "status": {
                "id": 2,
                "nome": "NORMAL"
            },
            "grupos": [
                {
                    "id": 5,
                    "nome": "GESINF"
                }
            ],
            "ambientes": [
                {
                    "id": 1,
                    "nome": "PRODUÇÃO"
                }
            ],
            "responsaveis": [
                {
                    "id": 12,
                    "nome": "EDUARDO FERNANDES BRITO",
                }
            ],
            "servicos": [
                {
                    "id": 17,
                    "nome": "Arquivos Portal",
                }
            ],
            "sistemas": [
                {
                    "id": 110,
                    "nome": "Portal - WWW"
                }
            ]
        }, 

Até o status não vai ter problema porque so tem uma opção mas grupos, ambientes, responsaveis, serviços e sistemas podem ter varias opções.

Código Vue JS

<template>
     <v-data-table :headers="headers" :items="items" :search="search" class="elevation-1" rows- 
     per-page="20">

   </v-data-table>
</template>

<script>
data() {
 headers: [
        { text: "ID", value: "id" },
        { text: "NOME", value: "nome" },
        { text: "HOSTNAME", value: "hostname" },
        { text: "ENDEREÇO IP", value: "ip_address" },
        { text: "TIPO VM", value: "tipoVm.nome" },
        { text: "CLUSTER", value: "cluster.nome" },
        { text: "STATUS", value: "status.nome" },
**aqui não pode ficar "grupos[0].nome, porque pode ser mais de um grupo**
        { text: "GRUPOS", value: "grupos[0].nome" },
        { text: "AMBIENTES", value: "ambientes[0].nome" },
        { text: "RESPONSÁVEIS", value: "responsaveis[0].nome" },
        { text: "SERVIÇOS", value: "servicos[0].nome" },
        { text: "SISTEMAS", value: "sistemas[0].nome" },
        { text: "OPÇÕES", value: "actions", sortable: false },
      ],
      items: [],
}
</script>

prototipo de tela

1
  • Por favor, edite a pergunta para limitá-la a um problema específico com detalhes suficientes para identificar uma resposta adequada.
    – Comunidade Bot
    Commented 29/11/2021 às 16:39

1 Resposta 1

0

Consegui resolver fazendo um tratamento nos dados recebidos ao invés de apenas definir nos cabeçalhos. Criei templates para os dados que precisavam de tratamento e depois inseri os templates na tabela.

<template>
  <v-row justify="center" align="center">
    <v-col class="pa-0 mx-0 my-6" cols="12" lg="12" sm="12" md="12">
        <v-data-table :headers="headers" :items="items.content" class="elevation-2" :search="search">
          <template v-slot:top>
            <v-toolbar flat>
              <v-toolbar-title>{{ tituloTabela }}</v-toolbar-title>
              <v-spacer/>
              <v-text-field v-model="search" class="d-inline-flex" append-icon="mdi-magnify" label="Buscar VM" outlined dense></v-text-field>
            </v-toolbar>
          </template>

          <template v-slot:[`item.grupo`]="{ item }">
            <template v-for="grupo in item.grupos"> {{ grupo.nome }};  </template>
          </template>
          <template v-slot:[`item.ambiente`]="{ item }">
            <template v-for="ambiente in item.ambientes" > {{ ambiente.nome }};  </template>
          </template>
          <template v-slot:[`item.responsaveis`]="{ item }">
            <template v-for="responsavel in item.responsaveis"> {{ responsavel.nome }};  </template>
          </template>
          <template v-slot:[`item.servicos`]="{ item }">
            <template v-for="servico in item.servicos"> {{ servico.nome }};  </template>
          </template>
          <template v-slot:[`item.sistemas`]="{ item }">
          <template class="sis" v-for="sistema in item.sistemas"> {{ sistema.nome }};  </template>
       </template>
        </v-data-table>
    </v-col>
  </v-row>
</template>
<script>
export default {
  name: 'MaquinasVirtuais',
  async asyncData({ $axios }) {
  const items = await $axios.$get('vms')
  return { items }
  },
  data() {
    return {
      tituloTabela: 'MÁQUINAS VIRTUAIS',
      search: "",
      headers: [
        { text: "ID", value: "id" },
        { text: "NOME", value: "nome" },
        { text: "HOSTNAME", value: "hostname" },
        { text: "ENDEREÇO IP", value: "ip_address", sortable: false },
        { text: "TIPO VM", value: "tipoVm.nome", sortable: false },
        { text: "CLUSTER", value: "cluster.nome", sortable: false },
        { text: "STATUS", value: "status.nome", sortable: false },
        { text: "GRUPOS", value: "grupo", sortable: false },
        { text: "AMBIENTES", value: "ambiente", sortable: false },
        { text: "RESPONSÁVEIS", value: "responsaveis", sortable: false },
        { text: "SERVIÇOS", value: "servicos", sortable: false },
        { text: "SISTEMAS", value: "sistemas", width: "20%", sortable: false },
      ],
    }
  },
}
</script>


Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .