2

我有一个 Laravel Livewire 组件，其中包含一个 Blade 组件，就像这样

<div>
    <div class="card-header">
        <div>{{ $quiz->name }}</div>
        <x-create-question-modal :state="$modalQuestionState" :question="$question"/>
    </div>

    @foreach($quiz->questions as $question)
    <div class="card-body">
        <div class="card-title">
            {{ $question->question }}
        </div>
        @foreach($question->choices as $choice)
            <div class="card-text">
                {{ $choice->name }}
            </div>
        @endforeach
    </div>
        <hr>
    @endforeach
</div>

这是我的刀片组件

<div>
    <div>
        <div wire:click="modalCreateQuestionToggle">Create New Quiz</div>
    </div>

    {{--  Create Quiz Modal --}}
    <div class="modal @if($state) d-block @endif" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Create New Quiz</h5>
                    <button wire:click="modalCreateQuestionToggle" type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form wire:submit.prevent="store">
                    <div class="modal-body">
                        <input type="text" wire:model="question">
                        @error('question') <span class="error alert-danger">{{ $message }}</span> @enderror
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Create</button>
                    </div>
                </form>

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

</div>

这是store我在Livewire课堂上的方法，

    public function store() {
        //
        $this->validate([
            'question' => 'required|min:5',
        ]);

        Questions::create([
            'question' => $this->question,
            'quiz_id' => $this->quiz->id
        ]);
        $this->modalQuestionState = !$this->modalQuestionState;
        $this->question = null;
    }

调用商店时，验证失败，但由于某种原因，它没有在我的刀片组件中呈现。

这是livewire网络的输出

errorBag: {question: ["The question must be at least 5 characters."]}
question: ["The question must be at least 5 characters."]
4

1 回答 1

3

只需将此部分放在您的 livewire 组件上，而不是完整的模态。我有同样的问题，通过这样做解决了。

它应该可以解决您的问题。让我知道。

      <div>
           <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Create New Quiz</h5>
                    <button wire:click="modalCreateQuestionToggle" type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form wire:submit.prevent="store">
                    <div class="modal-body">
                        <input type="text" wire:model="question">
                        @error('question') <span class="error alert-danger">{{ $message }}</span> @enderror
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Create</button>
                    </div>
                </form>

            </div>
      </div>

这是我在 liveware 组件中的模态：

https://ibb.co/KFWtFzP

这是我的刀片：

https://ibb.co/v156XVT

说明：这是因为当您的组件刷新时，livewire 会为您提供刷新的视图及其更改。在 Refreshed 组件中，不再触发模式打开。所以你没有得到改变。因此，当您使用模态时，请确保在您的 livewire 组件中使用模态内容，以便打开的模态保持打开状态，然后其中的内容将被刷新。希望我对你说清楚了。如果您不够清楚，请告诉我。

于 2020-03-10T10:59:43.207 回答