获取密钥vue.js

我有从后端响应是这样的：获取密钥vue.js

{ 
    "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和code等数组，其他时候我会有这个和5个以上的东西，也许是全新的东西。任何建议我该怎么做？

UPDATE：

我这样做是与vue.js网格组件和它的作品对我蛮好。这里是链接https://vuejs.org/v2/examples/grid-component.html。

来源

2017-02-23 Matija Župančić

这很难弄清楚。我确信有更好的方法来做到这一点，但我添加了额外的信息给我的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" 
     }, 
      ...

来源

2017-02-23 17:01:18 retrograde

谢谢，但我已经与实施vue.js网格解决这个零件。 –

获取密钥vue.js

回答

相关问题