MD-таблица с вложенным JSON выдает ошибку в консоли и неправильно отображает данные таблицы - PullRequest
Новая
       21

MD-таблица с вложенным JSON выдает ошибку в консоли и неправильно отображает данные таблицы

0 голосов
/ 14 мая 2019

Используя vue-material и md-table с v-моделью, вложенные данные отображаются правильно, но не отображаются должным образом в HTML.

Я пытался использовать v-for="(item, i) in devices.results" :key="item.pk" на md-table-row для итерации и отображениявложенные данные, но показывает ту же ошибку.

DeviceTable Component 

<md-table class="md-elevation-5" md-card v-model="devices.results" md-sort="name" md-fixed-header md-sort-order="asc">
        <md-table-toolbar>
          <h1 class="md-title">Devices</h1>
        </md-table-toolbar>

        <md-table-row slot="md-table-row" slot-scope="{ item }">
          <md-table-cell md-label="Actions">
            <md-button class="md-icon-button md-primary" @click="showEditDialog(item)"><md-icon>edit</md-icon></md-button>
            <md-button class="md-icon-button md-accent" @click="showDeleteDialog(item)"><md-icon>delete</md-icon></md-button>
          </md-table-cell>
          <md-table-cell md-label="ID" md-numeric>{{ item.pk }}</md-table-cell>
          <md-table-cell md-label="Brand" md-sort-by="brand">{{ item.brand }}</md-table-cell>
          <md-table-cell md-label="Name" md-sort-by="name">{{ item.name }}</md-table-cell>
          <md-table-cell md-label="Status" md-sort-by="status">{{ item.checkouts.status }}</md-table-cell>
          <md-table-cell md-label="Campus" md-sort-by="campus">{{ item.checkouts.user.campus }}</md-table-cell>
          <md-table-cell md-label="User" md-sort-by="user">{{ item.checkouts.user.first_name }} {{ item.checkouts.user.last_name }}</md-table-cell>
        </md-table-row>
      </md-table>

Предоставленные данные 

{
  "count":1,
  "next":null,
  "previous":null,
  "results": [{
    "pk":5,
    "name":"test",
    "created":"2019-05-09T22:06:09.623236Z",
    "last_updated":"2019-05-09T22:08:27.246362Z",
    "brand":"test",
    "year_purchased":12,
    "serial_number":"testtestesttest",
    "info":"12123",
    "checkouts": {
      "slug":"test-test",
      "created":"2019-05-09T22:06:09.642964Z",
      "last_updated":"2019-05-09T22:09:40.947893Z",
      "due_back":"2019-05-09",
      "checked_out":"2019-05-09T22:09:35.031123Z",
      "item":5,
      "user": {
        "slug":"John",
        "created":"2019-05-09T21:54:11.575416Z",
        "last_updated":"2019-05-09T21:54:11.575441Z",
        "first_name":"John",
        "last_name":"Smith",
        "school_id":501991,
        "campus":"AD",
        "department":"FC" },
     "status":"CO"}
    }
  ]
}

Ожидаемое: правильное отображение данных на странице. Факт:

.
...