Laravel Blade 使用 VueJS 在 table 内渲染 table

Question

我有这个场景与 Laravel blade 视图一起工作：

@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 元素。当 childs > 0 时，我需要创建其他 tr。我需要在每张图上检查这个条件。

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

参考资料link：

Laravel Blade 使用 VueJS 在 table 内渲染 table

Laravel Blade rendering table inside table with VueJS

html-table

laravel

vue.js

laravel-blade

v-for