How to add tr to table by condition?

Question

Vue.js

There is a table with inputs in the cells where the user enters data, there are several trs in it with the same type of inputs. These tr's are output in a loop. After filling and sending, if there were errors in filling, notifications about them come, which must be displayed under the tr in which these errors were found. In other words, add a new tr under it, in which there will no longer be inputs, but text notifications, then, they say, this is a mistake.

The conclusion is made like this:

<tbody>

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

</tbody>

And the report-table-row template is:

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

Of course, it is impossible to add another tr to the template, i.e. there can be only one root element. Wrapping tr in some kind of wrapper is also impossible, because it breaks the structure of the table. How to make it so that it makes sense like this?

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

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

Answer 1

These are the options:

1. Make a separate one tbodyfor each pair of lines. Transfer tbodyfrom a table component to a row component - it will be the root element there:
   

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

   
   Example .
   
2. Make the row component functional - there can be multiple root nodes. Example .
   
3. Refuse to use the row component, render trdirectly in the table component:
   

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

   
   Example .
   
4. Move to Vue 3 - there you can make a component with multiple root nodes. Example .
   
5. Try using a crutch . There will be no example here - I have not touched this thing and I am not going to.