Vue JS 2 таблица просмотра полных объектов вместо значений

Question

Я все еще довольно новичок в Vue JS 2. Я строю динамическую таблицу, в которой количество столбцов (и заголовков столбцов) будет колебаться в зависимости от назначенного ему массива. Это означало бы, что я не могу сделать что-то подобное

<td>{{assignments.name}}</td>
<td>{{assignments.id}}</td>
<td>{{assignments.location}}</td>

потому что данные будут меняться и не всегда будут совпадать. Я вытягиваю из жестко закодированного JSON, пока не настрою свой API:

[
{
  "Name": "Jennison",
  "ID": 879456,
  "Location": "Carotsville"
},
{
  "Name": "Cordan",
  "ID": 547932,
  "Location": "Paperville"
},
{
  "Name": "Sir Mac",
  "ID": 423971,
  "Location": "Hammerville"
},
{
  "Name": "Pat",
  "ID": 984123,
  "Location": "Isenville"
}
]

Ниже приведена разметка, с которой я борюсь. Вместо того, чтобы захватывать каждое из значений, он захватывает каждый из объектов. Что мне нужно сделать, чтобы вместо этого получить значения, чтобы правильно заполнить таблицу?

<table class="table table-striped table-bordered table-sm table-hover">
  <thead>
    <tr>
      <th v-for="(value, key) in assignmentsHardcoded[0]" v-bind:key="value">{{key}}</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td v-for="assignments in assignmentsHardcoded" v-bind:key="assignments.id">{{ assignments }}</td>
    </tr>
  </tbody>
</table>

Это результат:

Что мне нужно сделать, чтобы вместо этого он захватил значения, чтобы правильно заполнить таблицу?

Answer 1

Это должно сработать:

<table class="table table-striped table-bordered table-sm table-hover">
  <thead>
    <tr>
      <th 
        v-if="assignmentsHardcoded.length" 
        v-for="(value, key) in assignmentsHardcoded.find(a=>true)" 
        :key="value">
        {{key}}
      </th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(assignment, i) in assignmentsHardcoded" :key="'a-'+i">
      <td v-for="attr in assignment">{{ attr }}</td>
    </tr>
  </tbody>
</table>

Проблема, с которой вы столкнулись, заключается в том, что вы просматривали цикл на td, который работал бы, только если вы ожидали, что все данные будут отображаться в одной строке.

Учитывая, что это обычно не так, имеет смысл поднять v-for до тега <tr>, чтобы мы могли использовать его в наших v-for наших <td>, поскольку атрибуты могут отличаться и мы не хотим застрять там, где мы жестко кодируем структуру данных.