how to reach vue object properties to show them on head

Question

I have a table where i show people's some properties. As these properties can be extended in the future, i need to show all the available properties in table head, and the related answers to those properties under table body

I can reach the people's properties with the syntax: v-for='person in people' and {{people.name}} But i need to dynamically write 'Name' to table head.

Is there any option to reach to the object properties like name, age, salary, country, etc. ? ex: people={name:john, surname: black, age:35, country:german}

<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

As with v-for directive you can cycle not only arrays, but objects also, just use second, nested v-for directive. Generic example:

<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 to your sample data people={name:john, surname: black, age:35, country:german}

Key value in horizontal Table

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

Key value in vertical Table

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