Как верно отработать вывод строк циклом v-for?

Question

[Алексей]

Не выходит после каждой строки с полями заголовка и данных к нему, вывести еще 1 дополнительную где будут приложения именно к этой строке
то есть по структуре должно быть так:

<tr>
   <th>Шапка</th>
</tr>
<tr>
<td>Тело шапки</td>
</tr>
<tr>
<th>Шапка приложения</th>
</tr>
<tr>
<td>Тело приложения</td>
</tr>

Но вышло лишь организовать вывод который к уже существующей шапке таблицы дописывает новые поля. в размере зависимом от количества приложений

<table
        class="table table-sm table-bordered table-hover"
        style="margin: 0; border: 1px solid black"
      >
        <thead class="thead-light" style="background: #e9ecef !important">
          <tr>
            <th>Номер договора</th>
            <th>Статус ТТ по договору</th>
            <th>Дата заключения</th>
            <th>Отдел инициатора</th>
            <th>Вид договора</th>
            <th>Предмет договора</th>
            <th>Сумма договора</th>
            <th>Срок действия договора</th>
            <th>Пролонгация</th>
            <th>Статус</th>
            <th>Скан-копия</th>
            <th>Категория</th>
            <th>Примечание</th>

            <th style="background: burlywood !important">
              Рабочее наименование
            </th>
            <th style="background: burlywood !important">
              Краткое наименование
            </th>
            <th style="background: burlywood !important">
              Полное наименование
            </th>
            <th style="background: burlywood !important">ЕЛС</th>
            <th style="background: burlywood !important">ОГРН/ЕГРПОУ/БИН</th>
            <th style="background: burlywood !important">ИНН/РНН</th>
            <th style="background: burlywood !important">КПП/№ Св-ва НДС</th>
            <th style="background: burlywood !important">Юридический адрес</th>
            <th style="background: burlywood !important">Дата создания</th>
            <th style="background: burlywood !important">Руководитель</th>
            <th style="background: burlywood !important">Телефон</th>
            <th style="background: burlywood !important">Группа</th>
            <template v-for="(el, idx) in countAnnexes">
              <th  :key="idx" style="background: wheat !important">
                Тип приложения
              </th>
              <th style="background: wheat !important">Номер приложения</th>
              <th style="background: wheat !important">Дата</th>
              <th style="background: wheat !important">Примечание</th>
              <th style="background: wheat !important">Скан-копия</th>
              <th style="background: wheat !important">Номер договора</th>
            </template>
          </tr>
        </thead>
        <tbody>
   
          <tr v-for="farm in farmDirecory" :key="farm.id">
            <td>{{ farm.number }}</td>
            <td>{{ farm.company_status }}</td>
            <td>{{ farm.created_at }}</td>
            <td>{{ farm.department }}</td>
            <td>{{ farm.contract_type }}</td>
            <td>{{ farm.contract_object }}</td>
            <td>{{ farm.fiat_amount }}</td>
            <td>{{ farm.expiration_date }}</td>
            <td v-if="farm.prolongation == true">Да</td>
            <td v-else>Нет</td>
            <td v-if="farm.is_active == true">Да</td>
            <td v-else>Нет</td>
            <td>
              <a :href="farm.scan" target="_blank"
                ><img style="height: 20px" src="@/assets/pdf.png" alt="скан"
              /></a>
            </td>
            <td>{{ farm.category }}</td>
            <td>{{ farm.comment }}</td>
            <td>{{ farm.counterparty.work_name }}</td>
            <td>{{ farm.counterparty.short_name }}</td>
            <td>{{ farm.counterparty.full_name }}</td>
            <td>{{ farm.counterparty.els }}</td>
            <td>{{ farm.counterparty.ogrn }}</td>
            <td>{{ farm.counterparty.inn }}</td>
            <td>{{ farm.counterparty.kpp }}</td>
            <td>{{ farm.counterparty.legal_address }}</td>
            <td>{{ new Date(farm.counterparty.created_at).toLocaleString() }}</td>
            <td>{{ farm.counterparty.manager }}</td>
            <td>{{ farm.counterparty.phone }}</td>
            <td>{{ getGroupName(farm.counterparty.group) }}</td>

            <template v-for="f in farm.annexes">
              <td>{{ f.doc_type }}</td>
              <td>{{ f.number }}</td>
              <td>{{ new Date(f.created_at).toLocaleString() }}</td>
              <td>{{ f.comment }}</td>
              <td>
                <a :href="f.scan" target="_blank"
                  ><img src="@/assets/excel.png"
                /></a>
              </td>
              <td>{{ f.contract }}</td>
            </template>
          </tr>
        </tbody>
      </table>

Answer 1

[iljaGolubev]

не понятно, что именно "не выходит"

может так?

// псевдо
<template v-for="farm in farmDirecory" :key="farm.id">
  <tr>
    <td>{{farm.number}}</td>
  </tr>
  <template v-if="farm.annexes">
    <tr><th>Приложения</th></tr>
    <tr v-for="f in farm.annexes">
        <td>{{f.number}}</td>
    </tr>
  </template>
</template>

Comments

[Алексей]

iljaGolubev не выходит вывести сначала строку и ее данные, под ней приложение к ней, далее идут строки в таком же виде