I have v-datatable using vuetify I want to get nested data to be displayed unfortunately I can't get the nested object value this is my code

<template slot="items" slot-scope="props">
          <tr @click="rowClick(props.item.name)">
            <td
              class="text-xs-right"
            >{{ props.item.firstName + props.item.middleName + props.item.lastName}}</td>
            <td class="text-xs-right">{{ props.item.gender }}</td>
            <td class="text-xs-right">{{ props.item.dateOfBirth }}</td>
            <td class="text-xs-right">{{ props.item }}</td>
          </tr>
        </template>

and this is the header

  headers: [
    {
      text: "MCN",
      align: "left",
      sortable: false,
      value: "medicalRecordNumber",
      width: "16%"
    },
    { text: "Full Name", value: "fullName", width: "16%" },
    { text: "Gender", value: "gender", width: "16%" },
    { text: "Date Of Birth", value: "dateOfBirth", width: "16%" },
    { text: "Phone Number", value: "address", width: "16%" },
    { text: "Actions", value: "action", sortable: false }
  ],

and my data

{
            "medicalRecordNumber": "dsUlBnusoH",
            "fullName": "Rozella SchusterProf. Chloe Hauck DDSAthena Hill III",
            "firstName": "Rozella Schuster",
            "middleName": "Prof. Chloe Hauck DDS",
            "lastName": "Athena Hill III",
            "gender": "Female",
            "dateOfBirth": "2018-04-18",
            "language": "Tigregna",
            "religion": "Catholic",
            "address": {
                "region": "Addis Ababa",
                "woreda": "bole",
                "kebele": "10",
                "houseNumber": "35698",
                "telPhoneNumber": null,
                "mobilePhoneNumber": null
            },
            "emergencyContact": {
                "firstName": "Krista Collins III",
                "middleName": "Onie Roob",
                "lastName": "Dr. Vivien Miller PhD",
                "emergencyContactAddress": null
            }
        }

i got the values but not the nested one it displays [object Object]

I have v-datatable using vuetify I want to get nested data to be displayed unfortunately I can't get the nested object value this is my code

<template slot="items" slot-scope="props">
          <tr @click="rowClick(props.item.name)">
            <td
              class="text-xs-right"
            >{{ props.item.firstName + props.item.middleName + props.item.lastName}}</td>
            <td class="text-xs-right">{{ props.item.gender }}</td>
            <td class="text-xs-right">{{ props.item.dateOfBirth }}</td>
            <td class="text-xs-right">{{ props.item }}</td>
          </tr>
        </template>

and this is the header

  headers: [
    {
      text: "MCN",
      align: "left",
      sortable: false,
      value: "medicalRecordNumber",
      width: "16%"
    },
    { text: "Full Name", value: "fullName", width: "16%" },
    { text: "Gender", value: "gender", width: "16%" },
    { text: "Date Of Birth", value: "dateOfBirth", width: "16%" },
    { text: "Phone Number", value: "address", width: "16%" },
    { text: "Actions", value: "action", sortable: false }
  ],

and my data

{
            "medicalRecordNumber": "dsUlBnusoH",
            "fullName": "Rozella SchusterProf. Chloe Hauck DDSAthena Hill III",
            "firstName": "Rozella Schuster",
            "middleName": "Prof. Chloe Hauck DDS",
            "lastName": "Athena Hill III",
            "gender": "Female",
            "dateOfBirth": "2018-04-18",
            "language": "Tigregna",
            "religion": "Catholic",
            "address": {
                "region": "Addis Ababa",
                "woreda": "bole",
                "kebele": "10",
                "houseNumber": "35698",
                "telPhoneNumber": null,
                "mobilePhoneNumber": null
            },
            "emergencyContact": {
                "firstName": "Krista Collins III",
                "middleName": "Onie Roob",
                "lastName": "Dr. Vivien Miller PhD",
                "emergencyContactAddress": null
            }
        }

i got the values but not the nested one it displays [object Object]

• javascript
• laravel
• vue.js
• vuetify.js

• { text: "Phone Number", value: "address" - you're telling it to take the whole object. You probably have to navigate into it, without having tested I would say something along the lines of { text: "Phone Number", value: "address"."houseNumber", whatever the syntax is in JSON – half of a glazier Commented Feb 26, 2020 at 12:22

2 Answers 2

replace

{ text: "Phone Number", value: "address", width: "16%" },

to

{ text: "Phone Number", value: "address.telPhoneNumber", width: "16%" },

@Ktertz You just need to create a custom v-solt template with a v-for loop for every object.

Upadate: @Ktertz deleted his question, I will leave my answer here, maybe it will help someone else.

His question was related to nested objects. It was just displaying [object Object] (Same as OP Question).

He had a list of objects like:

engines: [
             {
                 id: 1,
                 name: "V8",
                 modules: [
                              {
                                   id: 1,
                                   moduleName: "Comp"
                               },
                               {
                                   id: 2,
                                   moduleName: "Enip"
                               },
                           ]
             }
        ]

My working solution was to just create a custom v-solt template with a v-for loop for every object:

headers:

{
     sortable:true,
     text:'Modules Formation',
     value:'modules',
     align:'right'
},

Now place this snipped inside your v-data-table:

<template v-slot:[`item.modules`]="{ item }">
      <div v-for="module in item.modules" :key="module.id">
        {{ module.moduleName }}
      </div>
</template>