【问题标题】:Selected option value always null in Laravel Livewire form submitLaravel Livewire 表单提交中选定的选项值始终为空
【发布时间】:2021-07-03 03:19:02
【问题描述】:

我对 Laravel Livewire 比较陌生,并且为此苦苦挣扎。我有一个具有单个选择输入的表单,在提交时,它转到 Livewire 组件的存储功能,我希望捕获所选选项以进一步处理数据。

现在,表单可以正确呈现;选择输入是动态填充的。

  1. 在第一次提交时,字段值始终为 null,当重新加载包含表单的 livewire 组件时,选择输入会丢失其 CSS,我不知道为什么。

  2. 在第二次提交时,我看到选择输入选择的选项被捕获,我正在通过“更新”方法执行此操作,但公共属性仍然为空。对此感到非常困惑。

如何解决这两个问题?我正在使用 Laravel Framework 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
    }
}

【问题讨论】:

  • 嗨@JaideepDey,欢迎来到SO。你能澄清一下你丢失了哪些 CSS 吗?你有任何 laravel 错误吗?
  • 将你的刀片代码包装到一个 div 容器中,这在 livewire 组件的刀片中非常重要!
  • 顺便说一句,请参阅有关 livewire 水合和生命周期的相关问题:hydrationlife cycle

标签: php laravel laravel-livewire


【解决方案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:  

尝试删除它,看看会发生什么。 如果您也显示您的日志文件,那就太好了。

【讨论】:

    【解决方案2】:

    我有类似的问题并解决它。我认为您的刀片中的公共 $course 课堂和 foreach 中的 $course 有冲突。在您的 foreach ex($item) 中为 $curse 设置另一个名称并再次检查。

    【讨论】:

      猜你喜欢
      • 2014-10-01
      • 2013-12-19
      • 1970-01-01
      • 1970-01-01
      • 2022-01-12
      • 2023-04-04
      • 1970-01-01
      • 1970-01-01
      • 2018-11-12
      相关资源
      最近更新 更多