Laravel Livewire：在模态中选择关闭模态而不渲染

Question

我正在尝试在模式中进行选择，以便在我的应用程序中使用联系人公式。 视图还可以，选择在这里，但是当我选择其中一个选项时，模态关闭并阻止所有内容。

我在一个 livewire 组件中。

简历.php

namespace App\Http\Livewire\Simulation;

use Livewire\Component;
use App\Models\Contributor;
use App\Models\Course;
use App\Models\Finance;
use Barryvdh\DomPDF\Facade as PDF;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\URL;
use Illuminate\Support\Facades\Validator;

class Resume extends Component{
    public $contactSchool, $contactSchoolOther;
    public function submitForm()
    {
        Validator::make(
            [
                'contactSchool' => $this->contactSchool,
                'contactSchoolOther' => $this->contactSchoolOther
            ],
            [
                'contactSchool' => 'required'
            ]
        )->validate();
        dd('test');
    }
    public function render()
    {
        return view('livewire.simulation.resume');
    }

}

livewire.simulation.resume.blade.php

<div>
  @include('livewire.simulation.cards._student-project')
  </div>

@include 是因为我还有很多其他的小组件要添加

livewire.simulation.resume._student-project.blade.php

<div class="card card-custom card-stretch gutter-b">
    <div class="card-body">
        <div class="row">
            @if ($finance->course->employability_comment)
                <div class="col-md-6">
                    <div class="card card-custom card-stretch gutter-b">
                        <div class="card-header bg-light-primary">
                            <div class="card-title font-size-h3">
                                Statistiques Emploi 
                            </div>
                        </div>
                        <div class="card-body">
                            Stats emploi
                        </div>
                    </div>
                </div>
            @endif
            <div class="card-body text-center">
                <a href="#" class="btn btn-primary text-uppercase" data-toggle="modal"
                    data-target=".contactSchool-modal-lg">contacter l'école</a>
            </div>
        </div>
    </div>
</div>
<div class="modal fade contactSchool-modal-lg" id="contactSchool" role="dialog"
    aria-labelledby="contactSchoolModaltitle">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title text-center text-uppercase" id="contactSchoolModaltitle">contacter
                    {{ $finance->school->name ?? '' }}
                </h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="close">
                    <span aria-hidden="true close-btn">×</span>
                </button>
            </div>
            <div class="modal-body">
                <!--begin::Select-->
                <form>
                    <div class="form-group">
                        <label>Indiquez la raison pour laquelle vous souhaitez contacter l'école</label>
                        <select name="contactSchool" wire:model="contactSchool"
                            class="form-control form-control-solid form-control-lg">
                            <option value="">Select</option>
                            <option value="0">Je souhaite assister à une journée portes ouvertes</option>
                            <option value="1">Mon financement est finalisé</option>
                            <option value="-1">Autre raison</option>
                        </select>
                        @if ($contactSchool == -1)
                            <div class="form-group">
                                <label>Merci de préciser la raison</label>
                                <textarea type="text" wire:model="contactSchoolOther" placeholder="commentaire" value=""
                                    name="contactSchoolOther" class="form-control form-control-solid"
                                    rows="3"></textarea>

                                @error('contactSchoolOther') <span class="error"
                                        style="color:#FF0000">{{ $message }}</span>
                                @enderror
                            </div>
                        @endif
                        @error('contactSchool') <span class="error" style="color:#FF0000">{{ $message }}</span>
                        @enderror
                    </div>
                    <!--end::Select-->
                </form>
            </div>
            Result : {{ $contactSchool }}
            <div class="modal-footer">
                <div class="d-flex justify-content-between border-top mt-5 pt-10">
                    <div class="mr-3" wire:loading.remove wire:target='submitForm'>
                        <button type="button" class="btn btn-success font-weight-bolder text-uppercase px-9 py-4"
                            wire:click='submitForm'>envoyer</button>
                    </div>
                    {{-- <div class="alert alert-success" wire:loading wire:target='submitForm'>
                        Votre demande a été prise en compte, merci de patienter quelques instants !
                    </div> --}}
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                </div>

            </div>
        </div>
    </div>
</div>

我想要的是选择一个选项并提交它，以便（下一步）在我的数据库中创建一个实体。 感谢您的帮助！

Answer 1

经过大量研究，我发现了错误。

在modal的父元素中，有义务放置命令wire:ignore.self

所以，在刀片中，它将是：

<div wire:ignore.self class="modal fade contactSchool-modal-lg" id="contactSchool" role="dialog"
    aria-labelledby="contactSchoolModaltitle">

这样，它就可以正常工作了！