Data from an API on a V-TAB vuetify, with axios get vue js

Question

I'm trying to popularize a V-TAB, where each tab will have its specific data according to this image: I want to throw the data in the TAB PROFILE with the attributes: firstName, lastName, email, phone, etc. .. and in the TAB SERVICES the data of the array services, these two extracted from this JSON object:

[
    {
        "id": 1,
        "firstName": "Ana",
        "lastName": "Lucia",
        "phone": "(11)99989-8989",
        "mobilePhone": "(11)99989-8989",
        "email": "aninha@gmail.com",
        "gender": {
            "name": "feminino"
        },
        "status": {
            "name": "inativo"
        },
        "services": [
            {
                "name": "progressiva"
            },
            {
                "name": "Manicure"
            }
        ]
    }
]

I'm in doubt on how to do this procedure using the v-tab component as follows in this code taken from vuetify:

<template>
  <v-container grid-list-xl fluid >
    <v-layout row wrap>
      <v-flex sm12>
        <v-row
          class="mb-6"
          justify="center"
        >
          <v-col sm="10">
            <v-card>
              <v-tabs
                v-model="tab"
                fixed-tabs
                background-color="pink lighten-1"
                dark
              >
                <v-tab
                  v-for="item in items"
                  :key="item.tab"
                >
                  {{ item.tab }}
                </v-tab>
              </v-tabs>

              <v-tabs-items v-model="tab">
                <v-tab-item
                  v-for="item in items"
                  :key="item.tab"
                >
                  <v-row justify="center">
                    <v-col sm="6">
                      <v-card flat>
                        <v-card-text class="body-1">{{ item.content }}</v-card-text>
                      </v-card>
                    </v-col>
                  </v-row>
                </v-tab-item>
              </v-tabs-items>
            </v-card>
          </v-col>
        </v-row>

      </v-flex>
    </v-layout>
  </v-container>
</template>


<script>
import axios from 'axios'
  export default {
    data () {
      return {
        tab: null,
        employee: [],
        items: [
          { tab: 'Comissões', content: 'Aqui vai os dados de COMISSÕES' },
          { tab: 'Desempenho', content: 'Aqui vai os dados de DESEMPENHO' },
          { tab: 'Serviços', content: 'Aqui vai os dados de SERVIÇOS' },
          { tab: 'Agendamentos', content: 'Aqui vai os dados de AGENDAMENTO' },
          { tab: 'Histórico', content: 'Aqui vai os dados de HISTÓRICO' },
          { tab: 'Perfil', content: 'Aqui vai os dados de PERFIL' },

        ],
      }
    },

    created () {
      this.initialize()
    },

    methods: {
      initialize () {
          axios.get('http://192.168.26.130:3000/employee/1')          
            .then(response => {
            console.log(response.data);
          });
      },
    },
  }
</script>

I am confused on how to put the contents in the certain tabs, because for example, if I put the following content in this excerpt:

{ tab: 'Perfil', content: 'employee' },

It will render exactly the word "employee" and I want to render what is contained in OBJECT 'employee', and following this idea, fill in the other TABS. I already tried to modify the html excerpt:

<v-card-text class="body-1">{{ employee }}</v-card-text>

As a result, the FULL OBJECT 'employee' is rendered without any formatting, and in all tabs as shown in the image: can anybody help me?

Answer 1

        <script>
    import axios from 'axios'
      export default {
        data () {
          return {
            tab: null,
            employee: [],
            services: [],
            items: [
              { tab: 'Comissões', content: 'Aqui vai os dados de COMISSÕES' },
              { tab: 'Desempenho', content: 'Aqui vai os dados de DESEMPENHO' },
              { tab: 'Serviços', content: services },
              { tab: 'Agendamentos', content: 'Aqui vai os dados de AGENDAMENTO' },
              { tab: 'Histórico', content: 'Aqui vai os dados de HISTÓRICO' },
              { tab: 'Perfil', content: employee },

            ],
          }
        },

        created () {
          this.initialize()
        },

        methods: {
          initialize () {
              axios.get('http://192.168.26.130:3000/employee/1')          
                .then(response => {
                  console.log(response.data);
                  this.employee = response.data
                  this.services = this.employee.services
                  delete this.employee.services
              });
          },
        },
      }
    </script>

Don't forget to fetch data as object not array (if you are using mongoose use findOne or findById)

Answer 2

From what I understand is that you want to show different content in each V-TAB and you want to show the JSON data for the V-TAB check the Vuetify documentation and regarding JSON this can help you

https://vuetifyjs.com/en/components/data-tables/#data-tables