Vue JS 2 表格查看完整对象而不是值

Question

我对 Vue JS 2 还是很陌生。我正在构建一个动态表，其中列（和列标题）的数量将根据分配给它的数组而波动。这意味着我不能做这样的事情

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

因为数据会发生变化，并不总是相应地匹配。在设置 API 之前，我会从硬编码的 JSON 中提取：

[
{
  "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> 标签是有意义的，这样我们就可以在<td> 上的v-for 中使用它，因为属性可以不同并且我们不想陷入对数据结构进行硬编码的地方。