View data from an Api in a v-data-table, an object within a Vue js object, vuetify

Question

I have the following Json coming from an api, which I want to present in a V-DATA-TABLE:

[
    {
        "id": 1,
        "firstName": "Ana",
        "lastName": "Lucia",
        "phone": "(11)99989-8989",
        "mobilePhone": "(11)99989-8989",
        "email": "[email protected]",
        "gender": {
            "name": "feminino"
        },
        "status": {
            "name": "inativo"
        },
        "services": [
            {
                "name": "progressiva"
            },
            {
                "name": "Manicure"
            }
        ]
    },
    {
        "id": 2,
        "firstName": "Maria",
        "lastName": "Luiza",
        "phone": "(12)32333-3333",
        "mobilePhone": "(43)45555-5555",
        "email": "[email protected]",
        "gender": {
            "name": "feminino"
        },
        "status": {
            "name": "pendente"
        },
        "services": [
            {
                "name": "progressiva"
            }
        ]
    },
    {
        "id": 3,
        "firstName": "Mario",
        "lastName": "Braz",
        "phone": "(11)23232-3222",
        "mobilePhone": "(11)23232-3222",
        "email": "[email protected]",
        "gender": {
            "name": "masculino"
        },
        "status": {
            "name": "ativo"
        },
        "services": [
            {
                "name": "progressiva"
            }
        ]
    }
]

However in Data table the field that would come the Services, is coming empty as picture:

Follow the date code of my . Vue:

data: () => ({
      dialog: false,
      pageTitle: 'Employees',
      headers: [
        {
          text: 'First Name',
          align: 'start',
          sortable: false,
          value: 'firstName',
        },
        { text: 'Last Name', value: 'lastName' },
        { text: 'Email', value: 'email' },
        { text: 'Phone', value: 'phone' },
        { text: 'Mobile Phone', value: 'mobilePhone' },
        { text: 'Gender', value: 'gender.name' },
        { text: 'Status', value: 'status.name' },
        { text: 'Services', value: 'services.name' },
        { text: 'Actions', value: 'action', sortable: false },
      ],
      search: '',
      employees: [],
      genders: [],
      status: [],
      services:[],
      editedIndex: -1,
      editedItem: {},
      defaultItem: {},
    }),

I noticed that when I change this code snippet and leave only 'services':

{ text: 'Services', value: 'services' },

appears exactly the amount of objects that are the services but not the names:

then I suppose the mistake is occurring in this part, someone could help me?

** Updated**

It follows method I used to pull the main object which is the 'Employees' and all its relationships:

methods: {
      initialize () {
        axios.get('http://192.168.26.130:3000/employees/').then(response => {
          this.employees = response.data
          console.log(response)
        }).catch(e => {
          console.log(e)
        });
        axios.get('http://192.168.26.130:3000/genders/').then(response => {
          this.genders = response.data
          console.log(response)
        }).catch(e => {
          console.log(e)
        });
        axios.get('http://192.168.26.130:3000/employee-status').then(response => {
          this.status = response.data
          console.log(response)
        }).catch(e => {
          console.log(e)
        });
        axios.get('http://192.168.26.130:3000/services').then(response => {
          this.services = response.data
          console.log(response)
        }).catch(e => {
          console.log(e)
        });

      },

Answer 1

You will have to use the slot to format the item.

You can check the example based on your code here at codesandbox and versionei no Github for future consultation.

<template>
  <v-app>
    <v-data-table
      :headers="headers"
      :items="employees"
      :items-per-page="5"
      class="elevation-1"
  >
      <template v-slot:item.services="{ item }">
          <span v-for="serviceItem in item.services" :key="serviceItem.name">
            {{ serviceItem.name }}
          </span>
      </template>
  </v-data-table>
  </v-app>
</template>

<script>
import Playground from "./components/Playground";
import dados from "./data";

export default {
  name: "App",
  components: {
    Playground
  },
  data: () => ({
      dialog: false,
      pageTitle: 'Employees',
      headers: [
        {
          text: 'First Name',
          align: 'start',
          sortable: false,
          value: 'firstName',
        },
        { text: 'Last Name', value: 'lastName' },
        { text: 'Email', value: 'email' },
        { text: 'Phone', value: 'phone' },
        { text: 'Mobile Phone', value: 'mobilePhone' },
        { text: 'Gender', value: 'gender.name' },
        { text: 'Status', value: 'status.name' },
        { text: 'Services', value: 'services' },
        { text: 'Actions', value: 'action', sortable: false },
      ],
      search: '',
      employees: dados,
      genders: [],
      status: [],
      services:[],
      editedIndex: -1,
      editedItem: {},
      defaultItem: {},
    }),
};
</script>