html - VueJS : V-for not displaying as desired

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

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

这是列表渲染的官方 vue 文档:https://v2.vuejs.org/v2/guide/list.html