【问题标题】:Refresh same livewire component after form wire:submit.prevent在表单线之后刷新相同的 livewire 组件:submit.prevent
【发布时间】:2021-09-08 17:08:05
【问题描述】:

我想在表单提交后刷新相同的组件。有一个 if 语句允许表单在组件中显示。我想刷新整个组件,以免提交后再次显示表单。

我已经尝试过 emit,但我认为它不适用于同一个组件。

Livewire 组件

 <?php
    
    namespace App\Http\Livewire;
    
    use App\Lesson;
    use App\Question;
    use App\QuestionsOption;
    use App\TestsResult;
    use Livewire\Component;
    
    class LessonTest extends Component
    {
    
        public $test_result;
        public $lesson;
        public $test_exists;
        public array $question = [];
    
        //protected $listeners = ['testDone' => 'render'];
    
        public function mount($test_exists, $lesson, $test_result)
        {
            $this->lesson = $lesson;
          
            $this->test_exists = $test_exists;
            $this->test_result = $test_result;
        }
    
        public function lessonTest()
        {
    
            $lesson = Lesson::where('slug', $this->lesson->slug)->firstOrFail();
            $answers = [];
            $test_score = 0;
            foreach ($this->question as $question_id => $answer_id) {
                $question = Question::find($question_id);
                $correct = QuestionsOption::where('question_id', $question_id)
                    ->where('id', $answer_id)
                    ->where('correct', 1)->count() > 0;
                $answers[] = [
                    'question_id' => $question_id,
                    'option_id' => $answer_id,
                    'correct' => $correct,
                ];
                if ($correct) {
                    $test_score += $question->score;
                }
                /*
             * Save the answer
             * Check if it is correct and then add points
             * Save all test result and show the points
             */
            }
            $test_result = TestsResult::create([
                'test_id' => $this->lesson->test->id,
                'user_id' => \Auth::id(),
                'test_result' => $test_score,
            ]);
    
            $test_result->answers()->createMany($answers);
    
            $this->reset(['question']);
          
    
            $this->emit('testDone');
           
    
    
        }
    
      
        public function render()
        {
            return view('livewire.lesson-test');
        }
    }

Livewire 刀片视图

<div>
    @if ($test_exists)
        <hr />
        <h3>Test: {{ $lesson->test->title }}</h3>
        @if (!is_null($test_result))
            <div class="alert alert-info">Your test score: {{ $test_result->test_result }} /
                {{ $lesson->test->questions->count() }}</div>
        @else
            <form wire:submit.prevent='lessonTest' action="{{ route('lessons.test', [$lesson->slug]) }}"
                method="post">
                {{ csrf_field() }}
                @foreach ($lesson->test->questions as $question)
                    <b>{{ $loop->iteration }}. {{ $question->question }}</b>
                    <br />
                    @foreach ($question->options as $option)
                        <input type="radio" wire:model='question.{{ $question->id }}'
                            name="questions[{{ $question->id }}]" value="{{ $option->id }}" />
                        {{ $option->option_text }}<br />
                    @endforeach
                    <br />
                @endforeach
                <button class="btn btn-success btn-lg refresh" type="submit">Submit</button>
            </form>

        @endif
        <hr />
    @endif
</div>

【问题讨论】:

  • 你说的not show是清除表单数据还是隐藏表单?
  • 隐藏表单并显示更新到数据库的结果
  • 您能否提供您的组件和刀片视图的代码。
  • 代码已更新。谢谢
  • 谢谢,我已经解决了

标签: laravel laravel-livewire


【解决方案1】:

谢谢。我已经解决了,我忘记了我之前通过控制器的测试结果,所以我不得不回忆 test_result 以及 courseTest 操作中的 test_exist。

$this->test_result = TestsResult::where('test_id', $this->lesson->test->id)
        ->where('user_id', \Auth::id())
        ->first();

        $this->test_exists = true;

【讨论】:

    猜你喜欢
    • 2021-10-08
    • 2022-10-17
    • 2021-07-18
    • 2019-08-17
    • 2020-06-09
    • 2021-09-26
    • 2022-06-11
    • 1970-01-01
    • 2021-04-16
    相关资源
    最近更新 更多