获取表头的键和表单元 vue.js 的值

Question

我有这样的后端响应：

{
  "responseData": [
    {
      "count": 1,
      "startTime": "11.01.2017 12:25",
      "endTime": "11.01.2017 12:26",
      "code": "ABC"
    },
    {
      "count": 1,
      "startTime": "11.01.2017 13:50",
      "endTime": "11.01.2017 13:51",
      "code": "ABC"
    },
    {
      "count": 1,
      "startTime": "11.01.2017 14:05",
      "endTime": "11.01.2017 14:06",
      "code": "ABC"
    },
    {
      "count": 1,
      "startTime": "11.01.2017 14:35",
      "endTime": "11.01.2017 14:36",
      "code": "ABC"
    },
    {
      "count": 1,
      "startTime": "11.01.2017 14:45",
      "endTime": "11.01.2017 14:46",
      "code": "ABC"
    },
    {
      "count": 1,
      "startTime": "11.01.2017 15:35",
      "endTime": "11.01.2017 15:36",
      "code": "ABC"
    }
  ]
}

我将在数组中有更多数据。该表取决于用户的输入。 我想要我的桌子

<md-table>
   <md-table-header>
       <md-table-row id="header" v-for="value in responseData">
           <md-table-cell>{{ value.key }}</md-table-cell> // for each key in response one table cell
        </md-table-row>
    </md-table-header>

    <md-table-body>
      <md-table-row  v-for="(row, index) in responseData" :key="index">
         <md-table-cell>{{response.value}}</md-table-cell> //for each key table cell value
      </md-table-row>
    </md-table-body>
</md-table>

类似这样的东西，但我希望它是动态的。 http://codepen.io/zupa10/pen/OpJJEM 正如我所说的，有一次我将有 4 样东西在数组中，比如 count、startTime、endTIme 和代码，而其他时候我会有这个和另外 5 样东西，也许是全新的东西作为回应。 有什么建议我该怎么做？

更新：

我使用 vue.js 网格组件完成了这项工作，它对我来说很好用。这是链接https://vuejs.org/v2/examples/grid-component.html。

Answer 1

这很难弄清楚。我确信有更好的方法来做到这一点，但我在我的 json 数据中添加了额外的信息。

此示例呈现多个表，但除此之外，它应该适合您。

示例输出如下所示：

<table (v-for loop on tables)>
<th  (this is for table name, since I have multiple tables)> output == Member Company </th>
<td (for heading)> output == Company Name</td><td (for value)> output == Company ABC</td>
</table>

vue.js 中的循环结构如下：

<table v-for="(section_item, section_key) in results" class="table table-condensed" v-bind:id="section_item.section_id" data-id="{{$member->id}}">
  <thead>
      <tr>
         <th colspan="3">{{section_item.section_name}}</th>
      </tr>
  </thead>
  <tbody>
  <tr v-for="(field_item, field_key) in section_item.field_data">
   <td>{{field_item.name}}</td>
   <td>
      <a class="edit" v-bind:id="field_item.id">{{field_item.value}}</a>
   </td>
</tr>
</tbody>    
</table>

"results": [
   {
    "section_name": "Member Company",
    "section_id": "company_info",
    "field_data": {
        "0-company_name": {
            "name": "Company Name",
            "id": "company_info-company_name",
            "type": "string",
            "required": "1",
            "value": "Company ABC"
        },
        "1-member_type": {
            "name": "Member Type",
            "id": "company_info-member_type",
            "type": "string",
            "required": "1",
            "value": "Affiliate"
        },
            ...