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]
Advertisement
Answer
replace
{ text: "Phone Number", value: "address", width: "16%" },
to
{ text: "Phone Number", value: "address.telPhoneNumber", width: "16%" },