CODEWITHSUNDEEP
htmlvue.jsvuejs2
Orbitall
Orbitall

Reputation: 661

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 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>

Upvotes: 3

Views: 3156

Answers (3)

Nevres Jahic
Nevres Jahic

Reputation: 1

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

Upvotes: 0

larsch
larsch

Reputation: 981

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>

Upvotes: 4

Sui Dream
Sui Dream

Reputation: 550

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>

Upvotes: 0

Related Questions