javascript - vuetify v-data-table 不显示嵌套对象数据
问题描述
我有使用 vuetify 的 v-datatable 我想显示嵌套数据不幸的是我无法获得嵌套对象值这是我的代码
<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>
这是标题
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 }
],
和我的数据
{
"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
}
}
我得到了值,但没有得到它显示的嵌套值 [object Object]
解决方案
代替
{ text: "Phone Number", value: "address", width: "16%" },
至
{ text: "Phone Number", value: "address.telPhoneNumber", width: "16%" },
推荐阅读
- python - 当 Json 键被另一个键替换时出现循环错误
- django - unique_together 和 M2M 字段
- go - 何时使用互斥锁
- javascript - Node.js EventEmitter `on` 事件没有响应 `emit` 动作
- javascript - (单击)功能未在 chrome angular 6 中触发
- html - CSS 标题/标题右侧边框线与框填充
- php - Symfony 4 + ReactJS 无法正常工作
- python - 使用 Python 类创建纸牌游戏
- javascript - React - 显示/隐藏来自不同复选框的多个 div
- python - PYTHON 表面上的 3D 点