Laravel Blade rendering table inside table with VueJS

Question

I have this scenario working with Laravel blade view:

@foreach($event->drawingrequests as $drawing)
<tr>
    <td>{{ $drawing->field1 }}</td>
    <td>{{ $drawing->field2 }}</td>
    <td>{{ $drawing->field3 }}</td>
    <td>{{ $drawing->field4 }}</td>
    <td>{{ $drawing->field5 }}</td>
    <td>{{ $drawing->field6 }}</td>
    <td>{{ $drawing->field7 }}</td>
</tr>
    @if(count(drawing->childs) > 0)
        <tr><td colspan="7">
                <table class="table">
                    <tbody>
                    @foreach(drawing->childs as $stage)
                        <tr>
                            <td>{{ $stage->field1 }}</td>
                            <td>{{ $stage->field2 }}</td>
                            <td>{{ $stage->field3 }}</td>
                            <td>{{ $stage->field4 }}</td>
                            <td>{{ $stage->field5 }}</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </td></tr>
    @endif
@endforeach

I can I do it on VueJS??? The main question here in, on VueJs conditions are always connected to DOM elements.. I need to create other tr when childs > 0. And I need to check this condition on each drawing.

<tr v-for="drawing in eventdetail.event.drawingrequests">
    <td>@{{ drawing.field1 }}</td>
    <td>@{{ drawing.field2 }}</td>
    <td>@{{ drawing.field3 }}</td>
    <td>@{{ drawing.field4 }}</td>
    <td>@{{ drawing.field5 }}</td>
    <td>@{{ drawing.field6 }}</td>
    <td>@{{ drawing.field7 }}</td>
</tr>
@if(drawing.childs > 0)
    <tr>
        <td colspan="7">
            <table class="table">
                <tbody>
                <tr v-for="stage in drawing.childs">
                    <td>@{{ stage.field1 }}</td>
                    <td>@{{ stage.field2 }}</td>
                    <td>@{{ stage.field3 }}</td>
                    <td>@{{ stage.field4 }}</td>
                    <td>@{{ stage.field5 }}</td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
@endif

Answer 1

Found the solution:

<template v-for="drawing in eventdetail.event.drawingrequests">
    <tr>
        <td>@{{ drawing.field1 }}</td>
        <td>@{{ drawing.field2 }}</td>
        <td>@{{ drawing.field3 }}</td>
        <td>@{{ drawing.field4 }}</td>
        <td>@{{ drawing.field5 }}</td>
        <td>@{{ drawing.field6 }}</td>
        <td>@{{ drawing.field7 }}</td>
    </tr>
    <tr v-if="drawing.childs > 0">
        <td colspan="7">
            <table class="table">
                <tbody>
                <tr v-for="stage in drawing.childs">
                    <td>@{{ stage.field1 }}</td>
                    <td>@{{ stage.field2 }}</td>
                    <td>@{{ stage.field3 }}</td>
                    <td>@{{ stage.field4 }}</td>
                    <td>@{{ stage.field5 }}</td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
</template>

Reference link: Vue: Displaying nested data in a table