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的{​​{1}}中使用它是因为属性可以不同，所以我们不想卡在对数据结构进行硬编码的地方。