Vue component returning multiple table rows

Question

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 because of the tag structure html tables require. When I add the second tr in the v-design-row component then vue doesn't render anything.

Can anyone suggest the best method for accomplishing this?

main.vue

   <table class="table">
        <thead>
            <th>Image</th>
            <th>Name</th>
            <th>Description</th>
            <th>Status</th>
            <th>Order</th>
            <th>Edit</th>
            <th>Delete</th>
        </thead>
        <tbody v-for="catagory in catagories">
            <v-catagory-row :catagory="catagory"></v-catagory-row>
            <v-design-row v-for="design in catagory.designs" :design="design"></v-design-row>
        </tbody>
    </table>

v-design-row.vue

<template>
<tr>
    <td><img :src="design.image_directory" :alt="design.name"></td>
    <td>{{ design.name }}</td>
    <td>
        <button class="btn btn-secondary" type="button" data-toggle="collapse" :data-target="'#' + design.identifier" aria-expanded="false" :aria-controls="design.identifier">
            <i class="fa fa-plus" aria-hidden="true"></i> Show
        </button>
    </td>
    <td>
        <div class="switch">
            <input :id="'active'+design.id" v-model="design.active" class="btn-toggle btn-toggle-round-flat" type="checkbox">
            <label :for="'active'+design.id"></label>
        </div>
    </td>
    <td>
        <button class="btn btn-secondary" type="button">
            <i class="fa fa-caret-up" aria-hidden="true"></i>
        </button>
        <button class="btn btn-secondary" type="button">
            <i class="fa fa-caret-down" aria-hidden="true"></i>
        </button>
        {{ design.sort_order }}
    </td>
    <td>
        <button class="btn btn-secondary" type="button">
            <i class="fa fa-pencil" aria-hidden="true"></i>
        </button>
    </td>
    <td>
        <button class="btn btn-secondary" type="button">
            <i class="fa fa-trash" aria-hidden="true"></i>
        </button>
    </td>
</tr>
<tr>
    <td class="p-0" colspan="7">
        <div class="collapse" :id="design.identifier">
            <div class="p-3">
                {{ design.description }}
            </div>
        </div>
    </td>
</tr>
</template>

larsch · Accepted Answer · 2020-03-01 13:09:07Z

4

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>

answered Mar 1, 2020 at 13:09

larsch

9819 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sui Dream · Accepted Answer · 2017-10-25 11:58:46Z

0

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>

answered Oct 25, 2017 at 11:58

Sui Dream

5505 silver badges15 bronze badges

4 Comments

Orbitall Over a year ago

I think I see what you getting at, I added the v-for to a template inside the tbody. This template can be used as a invisible html tag with vue logic.

marlar Over a year ago

You cannot use <template> inside a component template.

Sui Dream Over a year ago

@marlar , you can.

marlar Over a year ago

@SuiDream. You are right, I was unclear. What I mean is that you cannot use <template> as a root element so the <template> doesn't solve OP's problem. For example, this is not allowed:<template> <template> <tr><td>{{ msg }}</td></tr> <tr><td>{{ msg }}</td></tr> </template> </template>

Nevres Jahic · Accepted Answer · 2022-05-26 14:28:28Z

0

You can use vue-fragment library. It allows you to have wrapper that wont actually be rendered. https://www.npmjs.com/package/vue-fragment

answered May 26, 2022 at 14:28

Nevres Jahic

11 silver badge2 bronze badges

2 Comments

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Dani3le_ Over a year ago

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

Collectives™ on Stack Overflow

Vue component returning multiple table rows

3 Answers 3

Comments

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related