Как сделать добавление tr в таблицу по условию?

Question

[Евгений Журов]

Есть таблица с инпутами в ячейках, куда юзер вводит данные, в ней несколько tr с однотипными инпутами. Эти tr выводятся в цикле. После заполнения и отправки, если были ошибки в заполнении, приходят уведомления о них, которые нужно вывести под тот tr, в котором эти ошибки обнаружены. Иначе говоря, добавить под него новый tr, в котором будут уже не инпуты, а текстовые уведомления, то, мол, вот тут ошибка.

Вывод делается так:

<tbody>

			<report-table-row
				v-for="row in sortingReports"
				:key="row.index"
				:row="row"
				:errors="publicReportsErrors.lines"
			/>

</tbody>

А шаблон report-table-row такой:

<template>
	    <tr>
            <td>Контент с инпутами</td>...
      </tr>
</template>

Добавить еще один tr в шаблон, разумеется, нельзя, т.е. только один корневой элемент может быть. Обернуть tr в какой-то враппер тоже нельзя, т.к. это нарушает структуру таблицы. Как сделать так, чтобы по смыслу получилось вот такое?

<template>
	    <tr>
            <td>Контент с инпутами</td>...
      </tr>

      <tr v-if="errors.length">
            <td>Контент с уведомлениями</td>...
      </tr>
</template>

Answer 1

[0xD34F]

Такие есть варианты:

1. Сделать отдельный tbody для каждой пары строк. Переносите tbody из компонента таблицы в компонент строки - будет там корневым элементом:
   
   

   <tbody>
     <tr>... </tr>
     <tr v-if="...">...</tr>
   </tbody>

   
   Пример.
   
   
2. Сделать компонент строки функциональным - там может быть несколько корневых узлов. Пример.
   
3. Отказаться от использования компонента строки, рендерить tr сразу в компоненте таблицы:
   
   

   <tbody>
     <template v-for="...">
       <tr>... </tr>
       <tr v-if="...">...</tr>
     </template>
   </body>

   
   Пример.
   
   
4. Переехать на Vue 3 - там можно сделать компонент с несколькими корневыми узлами. Пример.
   
5. Попробовать использовать костыль. Здесь примера не будет - к этой штуке не прикасался и не собираюсь.
   

Answer 2

[Евгений Журов]

Оказалось довольно просто, разобрался:

<tbody>
	<template
		v-for="row in sortingReports"
	>
		<report-table-row
			:key="row.index"
			:row="row"
			:is_errors="publicReportsErrors.length"
		/>
		<tr
			v-if="publicReportsErrors.length"
			:key="`err_${row.index}`"
		>
			<td
				colspan="6"
			>[вывод ошибок]</td>
		</tr>
	</template>

</tbody>