I use Vue 2.
I generate table from the collection:
<table class="table table-striped table-bordered">
<tbody>
<tr v-for="(type, typeIndex) in getAllUpgradeTypes" :key="typeIndex">
<td>
<imageDesc
style="margin-left: 10px"
:title="type"
:text="'Select an Option'"
:zoneId="selectedZone.id"
/>
</td>
</tr>
</tbody>
</table>
Currently, the table created with multiple rows, each row has only one column and shows one item inside the column.
My question how can I generate a table which will contain 3 columns per row?
You need a second
v-for
on the<td>
element. If you just want to hardcode the number 3 rather than base it off some data, you can do that:So for example, you could do something like this: