獲取密鑰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

回答

相關問題