Iterate "tr" element recursively

[rafi16d]

Version

2.3.3

Reproduction link

https://jsfiddle.net/rafi16d/puwcs9ay/

Steps to reproduce

I would like to iterate recursively on an objects to get a nested table.

I have this template:

<script type="text/x-template">
    <tr>
        <td><a v-on:click="toggle">[ ]</a></td>
        <td>...</td>
    </tr>
    <tr is="row-item"  v-show="open" ...></tr>
</script>

It's recursive, so each line tr has an other hidden line tr below.

When the user click on the [ ] on the parent line, the children lines will appear.

I already try to wrap the content within a tbody tag, but then I get tbody inside tbody, which is still an illegal table layout and breaks it.

<script type="text/x-template">
    <tbody>
        <tr>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr is="row-item" ...></tr>
    </tbody>
</script>

Vue@1.x doesn't require exactly one root element. How can I do without ?

Any idea on how to solve this?

Thanks.

What is expected?

Use multiple elements in template. Or another solution.

What is actually happening?

Error: Component template should contain exactly one root element

---

[wiiikiii]

why not using a html5 user defined tag?

for me "x-line" was working.

[rafi16d]

@wiiikiii Thanks for the response, it seems to work.
But is-it a legal html5 (table) layout ?

[rebz]

I had this exact same issue today. Solved it by using multiple tags as my table rows. Then use CSS to style your <tbody> element as if it were a <tr>.

Component w/ Rows

<template>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr colspan="3">details drop down here</tr>
    </tbody>
</template>

Output

<table>
    <thead>
        <th>col1</th>
        <th>col2</th>
        <th>col3</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr colspan="3">details drop down here</tr>
    </tbody>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr colspan="3">details drop down here</tr>
    </tbody>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr colspan="3">details drop down here</tr>
    </tbody>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr colspan="3">details drop down here</tr>
    </tbody>

[rafi16d]

@rebz Thank you for your response.

I already tried, but in my case it's recursive.
So if I use multiple tags as my table rows, like your example, it would be like that:

Component <row-item>

<template>
    <tbody>
        <tr>
            <td>{{ item.id}}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.description }}</td>
        </tr>
        <row-item>...</row-item><!-- It's calling itself for recursivity -->
    </tbody>
</template>

Output

<table>
    <tbody>
        <tr>
            <td>Parent id</td>
            <td>Parent name</td>
            <td>Parent description</td>
        </tr>
        <!-- Child -->
        <tbody>
            <tr>
                <td>Child id</td>
                <td>Child name</td>
                <td>Child description</td>
            </tr> 
        </tbody>
        <!-- Child -->
        <tbody>
            <tr>
                <td>Child id</td>
                <td>Child name</td>
                <td>Child description</td>
            </tr> 
        </tbody>
        ...
    </tbody>
</table>

You can see this fiddle for what I'm talking about.

Then I get tbody inside tbody, which breaks the table layout and is, by the way, an illegal table layout.

But the @wiiikiii solution seems working, I don't know if that is the best way to do that but if it's a legal html5 layout, why not.

[rebz]

While looking into your issue I discovered another one.
#5678

[LinusBorg]

This is not a bug. components require a root node, that's a technical limitation of the vdom implementation.

You can try to use functional components though - their functionality is limited, but they don't need a root element.

Please use Stakc Overflow or our forum at forum.vuejs.org to take this discussion further.

[MannikJ]

@rafi16d
In case somebody is still interested in how you could do the recursion thing, I figured out how to solve with two lines of dom manipulation with JQuery hooked into the custom rows lifecycle events mounted and beforeDestroy. It could look like this:

Table Template

<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th>Head</th>
                </tr>
            </thead>
            <tbody>
                <custom-row v-for="item in items" v-bind:key="item.id" :item="item"></custom-row>
            </tbody>
        </table>
    </div>
</template>

Row Template:

<template>
    <tr @click="childToggle = !childToggle">
        <td>Cell</td>
        <custom-row :class="item.id+'-child'" :parent="$el" v-if="childToggle" v-for="child in children" :key="item.id" :item="item"></custom-row>
    </tr>
</template>

mounted() {
    $(this.parent).after(this.$el)
},
beforeDestroy() {
    $('.' + this.item.id + '-child').remove()
}

This is not the best solution, but the code is clean and it just works. I bet you could do quite as easily without jQuery too, but I have jQuery in the project anyway, so this was a no-brainer for me.
It took me several hours of tinkering until I decided to do it like this. It just moves the dom element of the child row to the correct location in the table after it is initially mounted. Then before destroy it ensures that all sub elements are removed. This is needed because the correct parent child hierarchy in the dom gets destroyed.

[cihadturhan]

@MannikJ

This is not the best solution

Yes, it's not the best solution and for me it would be a impractical dirty hack 😞
I have a big excel-sheet-like structure and if I use jquery for hundreds of dynamic rows, I will sacrifice a huge performance and that would be unacceptable solution.

I have a situation exactly same with @rafi16d 's so I wonder if anyone find a proper solution

[rafi16d]

Meanwhile, I've open a question on stackoverflow (link).

@cihadturhan
I finally forget the idea to use "table" element and I use div elements. (JSFiddle).

I hope that it can resolve your issue

[cihadturhan]

@rafi16d, Thanks I already found your stackoverflow question and jsfiddle link :)
You used div, which is one of the plausible solution but I see you assigned bootstrap classes like col-xs-3 to make their height equal across rows and maybe you are not realized but if you assign a border to those divs, you will have 2x width because each div has 1 px border width.

These two issues made me worried about visual details and I'm going for a table solution so I'm flattening the data and use v-for so that I won't have to worry about width of any columns. To be honest, I never liked recursive solution for rendering :)

Thanks for the help,
Cihad

[MartinMuzatko]

display: contents