Laravel Таблица рендеринга лезвия внутри таблицы с VueJS

Question

У меня есть этот сценарий, работающий с Laravel блейд-видом:

@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

Я могу сделать это на VueJS ??? Основной вопрос здесь, в VueJs условия всегда связаны с элементами DOM. Мне нужно создать другое tr, когда childs> 0. И мне нужно проверять это условие на каждом чертеже.

<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

Найдено решение:

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

Ссылка: Vue: отображение вложенных данных в таблице