Laravel livewire 組件消失

Question

我有一個使用 Laravel livewire 的組件，它在我提交其中的表單后消失。

這是刀片內容：

<div class="w-full flex flex-col justify-start items-start px-5 wow delay-100 fadeInUp">
    <h3 class="w-full flex flex-row justif-start items-center text-center text-2xl font-medium text-gray-700 mt-5 mb-0">
        {{ $survey->name }}
    </h3>
    <div class="w-full mt-5">
        <div class="prose w-full max-w-full">
            {!! $survey->description !!}
        </div>
    </div>
    <form wire:submit.prevent="submit" class="w-full mt-10">
        @foreach($survey->fields as $field)
            <div class="w-full flex flex-col justify-start items-start gap-2 mb-10" wire:key="field{{ $field->id }}">
                <span class="font-medium" @class([
                            'text-gray-700',
                            'text-danger-700' => $errors_list && $errors_list->has($field->slug)
                    ])>
                    {{ $field->name }}
                    @if($field->is_required)
                        <sup class="font-medium text-danger-700">*</sup>
                    @endif
                </span>
                <div class="prose w-full max-w-full">
                    {!! $field->description !!}
                </div>
                <div class="w-full">
                    @switch($field->type)
                        @case('text')
                            <div class="w-full flex flex-row justify-start items-center gap-2">
                                {{ html()->text($field->slug)->class($field_class)->attribute('wire:model.defer', 'model.' . $field->slug) }}
                            </div>
                            @break;
                        @case('textarea')
                            <div class="w-full flex flex-row justify-start items-center gap-2">
                                {{ html()->textarea($field->slug)->class($field_class)->attribute('wire:model.defer', 'model.' . $field->slug) }}
                            </div>
                            @break;
                        @case('select')
                            <div class="w-full flex flex-row justify-start items-center gap-2">
                                {{ html()->select($field->slug, explode(',', $field->values))->class($field_class)->attribute('wire:model.defer', 'model.' . $field->slug) }}
                            </div>
                            @break;
                        @case('multiselect')
                            <div class="w-full flex flex-row justify-start items-center gap-2">
                                {{ html()->multiselect($field->slug, explode(',', $field->values))->class($field_class)->attribute('wire:model.defer', 'model.' . $field->slug) }}
                            </div>
                            @break;
                        @case('file')
                            <div class="w-full flex flex-row justify-start items-center gap-2">
                                {{ html()->file($field->slug) }}
                            </div>
                            @break;
                        @case('checkbox')
                            @foreach(explode(',', $field->values) as $value)
                                <div class="w-full flex flex-row justify-start items-center gap-2" wire:key="{{ $field->slug . '_' . $value }}">
                                    {{ html()->checkbox($field->slug, false, $value)->id($field->slug . '_' . $value)->attribute('wire:model.defer', 'model.' . $field->slug) }}
                                    {{ html()->label($value, $field->slug . '_' . $loop->index)->class('p-0') }}
                                </div>
                            @endforeach
                            @break;
                        @case('radio')
                            @foreach(explode(',', $field->values) as $value)
                                <div class="w-full flex flex-row justify-start items-center gap-2" wire:key="{{ $field->slug . '_' . $value }}">
                                    {{ html()->radio($field->slug, false, $value)->id($field->slug . '_' . $value)->attribute('wire:model.defer', 'model.' . $field->slug) }}
                                    {{ html()->label($value, $field->slug . '_' . $loop->index)->class('p-0') }}
                                </div>
                            @endforeach
                            @break;
                        @case('date')
                            <div class="w-full flex flex-row justify-start items-center gap-2">
                                {{ html()->date($field->slug, null, __('Y-m-d'))->class($field_class)->attribute('wire:model.defer', 'model.' . $field->slug) }}
                            </div>
                            @break;
                        @case('datetime')
                            <div class="w-full flex flex-row justify-start items-center gap-2">
                                {{ html()->datetime($field->slug, null, __('Y-m-d g:i A'))->class($field_class)->attribute('wire:model.defer', 'model.' . $field->slug) }}
                            </div>
                            @break;
                        @case('time')
                            <div class="w-full flex flex-row justify-start items-center gap-2">
                                {{ html()->time($field->slug, null, __('g:i A'))->class($field_class)->attribute('wire:model.defer', 'model.' . $field->slug) }}
                            </div>
                            @break;
                    @endswitch
                </div>

            </div>

        @endforeach

        <div class="w-full flex flex-row justify-start items-center gap-2">
            <button type="submit" class="px-3 py-1 text-white bg-fprimary hover:text-fprimary hover:bg-white border border-fprimary rounded">
                {{ __('Submit') }}
            </button>
        </div>
    </form>
</div>

而提交 function，只是檢查錯誤：

protected function rules(): array 
{
    return $this->survey->form_rules;
}

public function submit()
{
    $this->validate();
}

在$this->validate()行之前一切正常，在我調用這個 function 之后組件從渲染視圖中消失。 但是如果表單是有效的並且在驗證表單時沒有錯誤被觸發，那么一切都很好。

僅供參考，我在刀片頁面中呈現 livewire 組件：

<livewire:survey :survey="$survey"></livewire:survey>

我知道這個問題已經在其他問題中討論過，但我嘗試了所有解決方案但沒有成功。

Answer 1

我找到了簡單地刪除包含所有其他元素的<div>元素並將<form>元素保留為根的解決方案。

所以現在我的刀片文件中有以下代碼：

<form wire:submit.prevent="submit" class="w-full mt-10 w-full flex flex-col justify-start items-start">
    <h3 class="w-full flex flex-row justif-start items-center text-center text-2xl font-medium text-gray-700 mt-5 mb-0">
        {{ $survey->name }}
    </h3>
    <div class="w-full mt-5 mb-10">
        <div class="prose w-full max-w-full">
            {!! $survey->description !!}
        </div>
    </div>
    @foreach($survey->fields as $field)
        <div class="w-full flex flex-col justify-start items-start gap-2 mb-10" wire:key="field{{ $field->id }}">
            <span class="font-medium @if($errors->has('model.' . $field->slug)) text-danger-700 @else text-gray-700 @endif">
                {{ $field->name }}
                @if($field->is_required)
                    <sup class="font-medium text-danger-700">*</sup>
                @endif
            </span>
            <div class="prose w-full max-w-full">
                {!! $field->description !!}
            </div>
            <div class="w-full">
                @switch($field->type)
                    @case('text')
                        <div class="w-full flex flex-row justify-start items-center gap-2">
                            {{ html()->text($field->slug)->class($field_class)->attribute('wire:model.defer', 'model.' . $field->slug) }}
                        </div>
                        @break;
                    @case('textarea')
                        <div class="w-full flex flex-row justify-start items-center gap-2">
                            {{ html()->textarea($field->slug)->class($field_class)->attribute('wire:model.defer', 'model.' . $field->slug) }}
                        </div>
                        @break;
                    @case('select')
                        <div class="w-full flex flex-row justify-start items-center gap-2">
                            {{ html()->select($field->slug, explode(',', $field->values))->class($field_class)->attribute('wire:model.defer', 'model.' . $field->slug) }}
                        </div>
                        @break;
                    @case('multiselect')
                        <div class="w-full flex flex-row justify-start items-center gap-2">
                            {{ html()->multiselect($field->slug, explode(',', $field->values))->class($field_class)->attribute('wire:model.defer', 'model.' . $field->slug) }}
                        </div>
                        @break;
                    @case('file')
                        <div class="w-full flex flex-row justify-start items-center gap-2">
                            {{ html()->file($field->slug) }}
                        </div>
                        @break;
                    @case('checkbox')
                        @foreach(explode(',', $field->values) as $value)
                            <div class="w-full flex flex-row justify-start items-center gap-2" wire:key="{{ $field->slug . '_' . $value }}">
                                {{ html()->checkbox($field->slug, false, $value)->id($field->slug . '_' . $value)->attribute('wire:model.defer', 'model.' . $field->slug) }}
                                {{ html()->label($value, $field->slug . '_' . $loop->index)->class('p-0') }}
                            </div>
                        @endforeach
                        @break;
                    @case('radio')
                        @foreach(explode(',', $field->values) as $value)
                            <div class="w-full flex flex-row justify-start items-center gap-2" wire:key="{{ $field->slug . '_' . $value }}">
                                {{ html()->radio($field->slug, false, $value)->id($field->slug . '_' . $value)->attribute('wire:model.defer', 'model.' . $field->slug) }}
                                {{ html()->label($value, $field->slug . '_' . $loop->index)->class('p-0') }}
                            </div>
                        @endforeach
                        @break;
                    @case('date')
                        <div class="w-full flex flex-row justify-start items-center gap-2">
                            {{ html()->date($field->slug, null, __('Y-m-d'))->class($field_class)->attribute('wire:model.defer', 'model.' . $field->slug) }}
                        </div>
                        @break;
                    @case('datetime')
                        <div class="w-full flex flex-row justify-start items-center gap-2">
                            {{ html()->datetime($field->slug, null, __('Y-m-d g:i A'))->class($field_class)->attribute('wire:model.defer', 'model.' . $field->slug) }}
                        </div>
                        @break;
                    @case('time')
                        <div class="w-full flex flex-row justify-start items-center gap-2">
                            {{ html()->time($field->slug, null, __('g:i A'))->class($field_class)->attribute('wire:model.defer', 'model.' . $field->slug) }}
                        </div>
                        @break;
                @endswitch
            </div>
            @error('model.' . $field->slug)
                <span class="text-sm font-medium text-danger-700">{{ $message }}</span>
            @enderror
        </div>
    @endforeach

    <div class="w-full flex flex-row justify-start items-center gap-2">
        <button type="submit" class="px-3 py-1 text-white bg-fprimary hover:text-fprimary hover:bg-white border border-fprimary rounded">
            {{ __('Submit') }}
        </button>
    </div>
</form>

如果有人能給我一些信息，說明為什么這個改變讓它起作用，那就太好了，因為我不明白為什么將<div>元素作為根元素不起作用，而<form>起作用。

僅供參考，我還有其他包含<div>根元素的頁面，一切正常。

Answer 2

我使用了 EL OUFIR HATIM 的想法並且工作正常，任何人都可以幫助為什么 Livewire 發生這種情況有時在使用 div 時有效，有時僅適用於表單