頭に表示するためにvueオブジェクトのプロパティに到達する方法

Question

私は人々のいくつかのプロパティを表示するテーブルを持っています。これらのプロパティは将来拡張される可能性があるので、私はテーブルの頭に利用可能なすべてのプロパティを表示する必要があり、テーブル本体の下でこれらのプロパティに関連する回答を表示する必要があります

構文で人々のプロパティにアクセスできます： v- = 'person in people'と{{people.name}} しかし、テーブルの頭に「名前」を動的に書き込む必要があります。

名前、年齢、給与、国などのオブジェクトプロパティに到達するオプションはありますか？ 例：人= {名：ジョン、姓：黒、年齢：35、国：ドイツ} V-のためのディレクティブと同様に

<table class="table table-filter"> 
         <thead> 
          <tr> 
          <th>Key</th> 
          <th>Name</th> 
          <th>Age</th> 
          <th>Whatever</th> 

          </tr> 
         </thead> 
          <tbody> 
          <tr> 
           <td>Value</td> 
           <td>John</td> 
           <td>35</td> 
           <td>Green</td> 
          </tr> 
          <tr> 
           <td>Value</td> 
           <td>Selin</td> 
           <td>23</td> 
           <td>Black</td> 
          </tr>      
     </tbody> 

Answer 1

することができますサイクル配列だけでなくオブジェクトも、2番目のネストされたv-for指示文を使用します。一般的な例：水平表でのサンプルデータに

<thead> 
    <tr> 
    <th v-for="val, key in person[0]"> // with first object in array 
     {{ key }} // show key - name for each column 
    </th> 
    </tr> 
</thead> 
<tbody> 
    <tr v-for="person, idx in people" :key="idx"> // with whole array 
    <td v-for="val, key in person"> // with each object in array 
     {{ val }} // show value for each column 
    </td> 
    </tr> 
</tbody> 

Answer 2

Accordibg people={name:john, surname: black, age:35, country:german}

キー値の垂直表で

<table> 
    <tr> 
     <th v-for="(value, index) in people"> 
      {{ index }} 
     </th> 
    </tr> 
    <tr> 
     <td v-for="(value, index) in people"> 
      {{ value }} 
     </td> 
    </tr> 
<table> 

キー値あなたの例で

<table> 
    <tr v-for="(value, index) in people"> 
     <th> 
      {{ index }} 
     </th> 
     <td> 
      {{ value }} 
     </td> 
    </tr> 
<table>