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><trv-if="condition == 1"></tr><trv-else-if="condition == 2"></tr><trv-else></tr></template>