这是我的 Livewire 组件，在视图中命名为位置
<div>
<x-slot name="title">
{{ __('Location Management') }}
</x-slot>
<x-slot name="content">
<!-- /Add modal -->
<div wire:ignore.self class="modal fade" id="modal-add" >
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Create New Location</h4>
<button type="button" class="close" data-dismiss="modal" aria- label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form wire:submit.prevent="store" action="#" >
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="location_name">Location Name</label>
<input type="text" class="form-control" placeholder="Enter Location Name"
wire:model="location" id="location" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="status">Select Status</label>
<select class="form-control" wire:model="status" id="status" required>
<option value="Active">Active</option>
<option value="Disabled">Disabled</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" >Close</button>
<button type="submit" class="btn btn-primary" >Save changes</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- /edit modal -->
<div class="modal fade" id="modal-edit">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Location</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputEmail1">Location Name</label>
<input type="text" class="form-control" id="exampleInputEmail1"
placeholder="Enter Route Name">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Select Status</label>
<select class="form-control">
<option>Active</option>
<option>Disabled</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" wire:model="isSubmitting">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<div class="button-group">
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#modal-add">Create</button>
<div class="float-right">
<button type="button" class="btn btn-secondary">Import</button>
<button id="exportBtn" type="button" class="btn btn-secondary">Export</button>
</div>
</div>
</div>
<!-- /.card-header -->
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div class="gv">
<div class="table-responsive">
<table id="datatable" class="grid table table-striped table-bordered"
style="width:100%">
<thead>
<tr>
<th>Location</th>
<th>Status</th>
<th>Created_at</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach ($records as $record)
<tr>
<td>{{ $record->location_name }}</td>
<td>{{ $record->status }}</td>
<td>{{ $record->created_at }}</td>
<td>
<a href="#" data-toggle="modal"
data-target="#modal-edit"><i
class="pr-2 fa fa-edit text-green"></i></a>
<a href="#" wire:click="deleteLocation({{ $record->id }})"><i class="fa fa-trash text-red"></i></a>
</td>
</tr>
@endforeach
</tbody>
<tfoot>
<tr>
<th>Location</th>
<th>Status</th>
<th>Created_at</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</x-slot>
</div>
这是我的后端代码
<?php
namespace App\Livewire;
use App\Models\Location;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Facades\Session;
use Livewire\Component;
class Locations extends Component
{
public $location_name;
public $status;
public $records; // Define a public property to hold the locations
public function mount()
{
// Fetch locations from the database
$this->records = Location::all();
}
public function store()
{
dd($this->location_name, $this->status);
Location::create([
'location_name' => $this->location_name,
'status' => $this->status,
]);
// Reset form fields after submission
$this->reset(['location_name', 'status']);
Session::flash('message', 'Data Saved Successfully');
Session::flash('alert-class', 'alert-success');
}
public function deleteLocation($locationId)
{
// Find the location by ID
$location = Location::findOrFail($locationId);
// Delete the location
$location->delete();
// Fetch locations again after deletion
$this->records = Location::all();
// Optionally, you can display a success message
session()->flash('message', 'Location deleted successfully.');
}
public function render()
{
return view('livewire.locations');
}
}
下面是我的控制器
<?php
namespace App\Livewire;
use App\Models\Location;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Facades\Session;
use Livewire\Component;
class Locations extends Component
{
public $location_name;
public $status;
public $records; // Define a public property to hold the locations
public function mount()
{
// Fetch locations from the database
$this->records = Location::all();
}
public function store()
{
dd($this->location_name, $this->status);
Location::create([
'location_name' => $this->location_name,
'status' => $this->status,
]);
// Reset form fields after submission
$this->reset(['location_name', 'status']);
Session::flash('message', 'Data Saved Successfully');
Session::flash('alert-class', 'alert-success');
}
public function deleteLocation($locationId)
{
// Find the location by ID
$location = Location::findOrFail($locationId);
// Delete the location
$location->delete();
// Fetch locations again after deletion
$this->records = Location::all();
// Optionally, you can display a success message
session()->flash('message', 'Location deleted successfully.');
}
public function render()
{
return view('livewire.locations');
}
}
在过去的三天里，我一直在努力解决有关使用 Livewire 在 Laravel 应用程序中提交表单的持续问题。尽管进行了大量的研究和实验，我仍然无法在不触发页面重新加载的情况下实现提交表单的所需功能。
问题的关键在于将 Livewire 与 Bootstrap 模式集成以创建无缝的用户体验。虽然我已成功设置模式并使用wire:model将表单字段连接到Livewire属性，但每次尝试提交表单都会导致不良的页面刷新。
我广泛探索了 Livewire 的文档，尝试了各种方法，例如使用wire:submit.prevent来拦截表单提交并防止默认行为。虽然这种方法可以防止页面重新加载，但它并不能解决在不中断用户流的情况下触发服务器端操作的根本问题。
此外，我在 Livewire 组件中无缝编排服务器端操作时遇到了挑战。虽然我了解基本的生命周期挂钩（例如 mount()），但我很难在不遇到意外行为的情况下执行更复杂的操作（例如数据库更新或 API 调用）。
尽管我尽了最大努力，但我还是遇到了障碍，需要指导来克服这些挑战。我相信可能存在我忽略的特定于 Livewire 的细微差别或最佳实践，并且我渴望从其他人的经验和见解中学习。
总之，我的主要目标是无需重新加载页面即可提交表单。
好吧，经过多次尝试，我找到了解决方案，
问题出在两个文件中，app.blade（布局模板）和locations.blade .i 将我的位置内容包含在内容标签中，而不是仅将其包含在 div 标签中，而不是使用 {{$我在 app.blade 中使用了 {{$slot}}
的内容}}