javascript - 无法访问数据表中的 JSON 对象(JavaScript)(vue.js)

Question

我想显示 userStatuses 。如果 true 是 sendEmail，它应该显示 true
但是，如果我尝试获取此项目，它会显示为空。我可以访问所有其他项目，但不能访问 UserStatuses 项目。

我做错了什么

这是我的 JSON

{
    "id": 1,
    "email": "testing1@gmail.com",
    "password": "123456",
    "name": "Hans",
    "forename": "Dampf",
    "createdAt": "2018-12-03",
    "updatedAt": "2018-12-03",
    "AdminId": 1,
    "UserStatuses": [
        {
            "id": 1,
            "sendEmail": true,
            "sendResult": false,
            "createdAt": "2018-12-03T14:07:05.000Z",
            "updatedAt": "2018-12-03T14:07:05.000Z",
            "UserId": 1
        }
    ]
},

  :headers="headers"
  :items="userData"
  :search="search"
  :subHeaders="subHeaders"
  :pagination.sync="pagination"
  item-key="id"
  class="elevation-1"
>
  <template slot="items"  slot-scope="props" id="ident">
    <tr @click="props.expanded = !props.expanded">
      <td class="text-xs-left">{{ props.item.id }}</td>
      <td class>{{ props.item.name }}</td>
      <td class="text-xs-left">{{ props.item.forename }}</td>
      <td class="text-xs-left">{{ props.item.birthdate }}</td>
      <td class="text-xs-left">{{ props.item.surveyName }}</td>
      <td class="text-xs-left" >{{ props.item.createdAt }}</td>
      <td class="text-xs-left"></td>


      <td class="text-xs-left" > {**{props.item.UserStatuses.sendEmail}}**    
          <v-icon   big class="mr-2" >contact_mail</v-icon>
         <v-icon  big class="mr-2">comment</v-icon>
     </td>


      <td class="justify-center layout px-0">
        <v-icon small class="mr-2" @click="editItem(props.item)">edit</v-icon>
        <v-icon small @click="deleteItem(props.item)">delete</v-icon>
      </td>
    </tr>
  </template>
  <template slot="expand" slot-scope="props">
    <td class="text-xs-left">Email:
      <br>
      {{ props.item.email }}
    </td>
    <td class="text-xs-left">Phone:
      <br>
      {{ props.item.phone }}
    </td>

    <td>
      <v-btn small round color="primary" dark @click="getSurveyResult()">Open Results</v-btn>
    </td>
  </template>

  <template slot="no-data">
    <v-btn color="primary">Reset</v-btn>
  </template>
</v-data-table>

我的服务器生成 Json:

try {
  const userData = await User.findAll({
    include: [ UserStatus ]
  })enter code here
    .map(user => user.toJSON())

  res.send(userData)
} catch (err) {
  console.log(err)
}

我的 JavaScript 是:

this.userData =  (await DataService.index()).data;
  userData = JSON.stringify(userData);

Answer 1

{{props.item.UserStatuses.sendEmail}}

"UserStatuses": [] 是一个数组，但试图将它作为对象访问，这里不确定它是否总是会得到值，因此作为解决方案:

{{ props.item.UserStatuses.length ? props.item.UserStatuses[0].sendEmail : '' }}