Vue Component Returning Multiple Table Rows

I'm attempting to return two tr elements from a single component v-design-row. I know vue requires the template elements to be wrapped in a div, but I cannot wrap them in a div bec

Solution 1:

You are allowed to group row using multiple <tbody> sections like this:

<table>
  <thead>
    <tr> ... </tr>
  </thead>
  <tbody>
     <tr> ... </tr>
     <tr> ... </tr>
  </tbody>
  <tbody>
     <tr> ... </tr>
     <tr> ... </tr>
  </tbody>
</table>

You can use this in templates by using a <tbody> as the root element:

<template>
  <tbody>
    <tr> ... </tr>
    <tr> ... </tr>
  </tbody>
</template>

Solution 2:

Since second tr in your v-design-row contains description of design, I'd suggest that this is whole element and it should occupy one row and have its own layout.

Alternatively, you can have a description separately and all other data in component.

Also, statement

vue requires the template elements to be wrapped in a div

is not quite correct. Template can have any root element while it is a single element. So you can have

<template>
  <tr>
  </tr>
</template>

or even

<template>
  <tr v-if="condition == 1">
  </tr>
  <tr v-else-if="condition == 2">
  </tr>
  <tr v-else>
  </tr>
</template>