Для отображения двух v-for в таблице вам понадобится использовать вложенные циклы. Таким образом, вы сможете итерировать как по строкам таблицы, так и по столбцам внутри каждой строки.
Допустим, у вас есть массив данных, который вы хотите отобразить в таблице. Вы можете использовать два v-for для итерации по этому массиву. Первый v-for будет использован для прохода по каждому элементу массива и создания строк таблицы, а второй v-for будет использован для итерации по каждому элементу внутри строки и создания столбцов таблицы.
Вот пример кода, демонстрирующий, как отобразить два v-for в таблице с использованием Vue.js:
<table>
<thead>
<tr>
<th>Заголовок столбца 1</th>
<th>Заголовок столбца 2</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td v-for="column in item.columns" :key="column.id">
{{ column.data }}
</td>
</tr>
</tbody>
</table>
В приведенном коде используется массив данных items, который содержит объекты, представляющие строки таблицы. Каждый объект содержит массив columns, представляющий столбцы внутри строки.
При использовании первого цикла v-for мы итерируемся по каждому элементу массива items и создаем строки таблицы с помощью элемента <tr>. Затем, во втором цикле v-for, мы итерируемся по каждому элементу массива columns внутри каждой строки и создаем столбцы таблицы с помощью элемента <td>.
Обратите внимание на использование директивы :key в обоих v-for блоках. Это необходимо для обеспечения уникальности каждого элемента, что поможет Vue отслеживать изменения в массиве данных и обновлять таблицу при необходимости.
Таким образом, с использованием двух v-for вы сможете отобразить массив данных в таблице, имеющей строки и столбцы.