VueJS: V-для отображения не по желанию

Question

Как получить v-for для отображения данных таблицы в той же форме, что и следующий html:

<tr>
    <th scope="col">Name</th>
    <th scope="col">Price</th>
    <th scope="col">Product ID</th>
    <th></th>
</tr>

В настоящее время я использую следующий код vue v-for (ниже), но он добавляет заголовок (th) таблицы один под другим. Я бы хотел, чтобы заголовок таблицы отображался рядом.

<tr v-for="(column, index) in schema" :key="index">
    <th scope="col">{{column}}</th>
</tr>

Answer 1

Вам просто нужно поместить v-for на элемент, который вы хотите повторить, а не на его родительский элемент.

Цикл For должен быть установлен на <<strong> th ><<strong> / th >

<tr>
    <th v-for="(column, index) in schema" :key="index">{{column}}</th>
</tr>

Официальный документ для рендеринга списка: https://vuejs.org/v2/guide/list.html

Answer 2

свяжите заголовок сетки и данные отдельно.

 <template>
 <table>
   <thead>
   <tr>
     <th v-for="(header,index) in gridHeader" :key="index">
      {{header.displayName}}
     </th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(data, index) in gridData" :key="index" >
      <td>
      {{data.name}}
      </td>
      <td>{{data.age}}
      </td>
      <td>{{data.place}}
      </td>
    </tr>
  </tbody>
  </table>              
</template>

<script lang="ts">
import Vue from 'vue';    
export default class HelloWorld extends Vue {
  private gridHeader: object[] = [
        {name: 'Name', displayName: 'Name'},
        {name: 'Age', displayName: 'Age'},
        {name: 'Place', displayName: 'Place'}
    ];
  private gridData: any =[{name:'Tony',age:'31',place:'India'},
    {name:'Linju',age:'26',place:'India'},
    {name:'Nysa',age:'12',place:'India'}];
};
</script>
<style scoped>
</style>