VueJS：V-表示未按要求显示

Question

如何以与以下html相同的形式获取v-for以显示表数据：

<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循环应该放在<th> </ th>

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

这是列表渲染的官方vue文档：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>