Laravel Livewire 表單提交中選定的選項值始終為空

Question

我對 Laravel Livewire 比較陌生，正在為此苦苦掙扎。 我有一個具有單個選擇輸入的表單，在提交時，它轉到 Livewire 組件的存儲功能，我希望捕獲所選選項以進一步處理數據。

現在，表單正確呈現； 選擇輸入是動態填充的。

1. 在首次提交時，字段值始終為空，並且當重新加載包含表單的 livewire 組件時，選擇輸入丟失其 CSS，我無法弄清楚原因。

2. 在第二次提交時，我看到選擇輸入 selected 選項被捕獲，這是我通過“更新”方法執行的，但公共屬性仍然為空。 對此非常困惑。

我該如何解決這兩個問題？ 我使用的是 Laravel 框架 8.33.1 和 Livewire v2.4.1。

看法

<form class="edit-profile m-b30" method="POST" wire:submit.prevent="store">
    <div class="row">
        <!-- Your Profile Views Chart -->
        <div class="col-lg-12 m-b30">
            <div class="widget-box">
                <div class="widget-inner">
                    <div class="row">
                        <div class="col-12">
                            <div class="heading-bx left">
                                <h2 class="title-head">Registration</span></h2>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="ml-auto">
                                <h3>Course Details</h3>
                            </div>
                        </div>
                        <div class="form-group col-6">
                            <label class="col-form-label">Select Course</label>
                            <div>
                                <select class="form-control" name="course" wire:model="course">
                                    <option value="">Select Course</option>
                                    @foreach($courses as $course)
                                    <option value="{{ $course->id }}">{{ $course->Name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="seperator"></div>
                        <div class="col-12">
                            <button class="btn" name="submit" type="submit">Apply</button>
                            <button class="btn-secondry" type="reset">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

班級

class ApplyOnlineComponent extends Component
{
    public $courses;
    public $course;

    public function render()
    {
        return view('livewire.apply-online-component')->layout('layouts.base');
    }

    public function resetInputFields()
    {
        $this->reset();
    }

    public function updatedCourse($value)
    {
        $this->course = $value;
        Log::info('Inside updated. Selected course:'.$this->course);
        dd($value); // Works on second submit
    }

    public function mount()
    {
        Log::info('Inside mount');
        $this->courses = Courses::all();
    }

    public function store()
    {
        Log::info('Inside store of online registration. 
            Selected course:'.$this->course); // This always null
    }
}

Answer 1

看起來你的代碼工作得很好，因為我剛剛復制了你的代碼，並且在日志文件中是這樣寫的

[2021-07-04 00:01:51] local.INFO: Inside updated. Selected course:3  
[2021-07-04 00:01:54] local.INFO: Inside store of online registration.
            Selected course:3  
[2021-07-04 00:01:59] local.INFO: Inside updated. Selected course:1  
[2021-07-04 00:02:01] local.INFO: Inside store of online registration.
            Selected course:1  
[2021-07-04 00:05:17] local.INFO: Inside mount  
[2021-07-04 00:05:25] local.INFO: Inside updated. Selected course:2  
[2021-07-04 00:05:27] local.INFO: Inside store of online registration.
            Selected course:2  

我什至用 Bootstrap 進行了測試，它也很好，沒有任何 CSS 類丟失。 但是我使用了 Livewire 版本 2.5.1 和 Laravel 8.5 。

更新：似乎您放在 updatedCourse() 中的 dd() 導致了所有問題，因為我按原樣復制了您的代碼，這是它產生的內容：

[2021-07-04 00:10:15] local.INFO: Inside mount  
[2021-07-04 00:10:18] local.INFO: Inside updated. Selected course:1  
[2021-07-04 00:10:18] local.INFO: Inside store of online registration.
            Selected course:1  
[2021-07-04 00:10:24] local.INFO: Inside mount  
[2021-07-04 00:10:28] local.INFO: Inside updated. Selected course:3  
[2021-07-04 00:10:31] local.INFO: Inside store of online registration.
            Selected course:  
[2021-07-04 00:10:33] local.INFO: Inside updated. Selected course:2  
[2021-07-04 00:10:38] local.INFO: Inside store of online registration.
            Selected course:  
[2021-07-04 00:10:38] local.INFO: Inside store of online registration.
            Selected course:  
[2021-07-04 00:10:42] local.INFO: Inside updated. Selected course:3  
[2021-07-04 00:10:44] local.INFO: Inside store of online registration.
            Selected course:  

嘗試刪除它，看看會發生什么。 如果您也顯示您的日志文件，那就太好了。