Если вам не нужно использовать <table>
как таковое, самое простое решение - использовать вместо него контейнер с display: flex
и v-for
петлевых дочерних элементов div
, которые переносятся горизонтально следующим образом:
.container {
display: flex;
flex-wrap: wrap;
width: 800px;
}
Однако, если вам действительно нужно сохранить <table>
, вы можете вычислить массив templatePairs
:
computed:
templatePairs () {
return this.templates.reduce((acc, n, i) => {
i % 2 ? acc[acc.length - 1].push(n) : acc.push([n])
return acc
}, [])
}
Для использования следующим образом:
<tr v-for="(templatePair, i) in templatePairs" :key="i">
<td v-for="template in templatePair" :key="template.id" width="400">
<a @click="create(template.id)" class="hand-hover">
<i :class="`fa fa-${template.icon} fa-fw`"></i>
<strong>{{ template.label }}</strong>
</a>
</td>
</tr>