【发布时间】:2021-07-03 03:19:02
【问题描述】:
我对 Laravel Livewire 比较陌生,并且为此苦苦挣扎。我有一个具有单个选择输入的表单,在提交时,它转到 Livewire 组件的存储功能,我希望捕获所选选项以进一步处理数据。
现在,表单可以正确呈现;选择输入是动态填充的。
-
在第一次提交时,字段值始终为 null,当重新加载包含表单的 livewire 组件时,选择输入会丢失其 CSS,我不知道为什么。
-
在第二次提交时,我看到选择输入选择的选项被捕获,我正在通过“更新”方法执行此操作,但公共属性仍然为空。对此感到非常困惑。
如何解决这两个问题?我正在使用 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 水合和生命周期的相关问题:hydration 和 life cycle
标签: php laravel laravel-livewire