livewire 表单提交按钮重新加载页面并附加一个“?”在网址末尾

这是我的 livewire 组件在视图中的命名位置 {{ __('位置管理') }} 这是我的 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">&times;</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">&times;</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}} 的内容}}

回答 1 投票 0

使用 azure 数据浏览器进行 azure kusto 查询

使用 azure 数据浏览器 https://dataexplorer.azure.com/ 我运行了下面的两个查询。 第一个查询(总计数): 应用程序请求 |其中 TimeGenerate >= datetime("2024-03-28") 和 TimeGener...

回答 1 投票 0

如何解决 Firebase 计划函数错误:9 FAILED_PRECONDITION

我有一个计划函数(scheduledFunction),它调用另一个函数(_clearOldReports),该函数使用collectionGroup定期从任何名为reports的集合中删除文档。 在 GCP

回答 1 投票 0

Javascript 逻辑运算符 && 用于分配属性

我遇到了这段代码: var value = this.newTodo && this.newTodo.trim(); 在此示例中:http://codepen.io/anon/pen/rONEMQ?editors=101 我不明白 AND (&&a...

回答 2 投票 0

在二维数组上使用 numpy.interp 的最快方法

我有以下问题。我试图找到在 x 坐标的二维数组上使用 numpy 插值方法的最快方法。 将 numpy 导入为 np xp = [0.0, 0.25, 0.5, 0.75, 1.0] np.

回答 2 投票 0

Bash 删除变量中最后 2 个“/”符号之前的所有符号

挣扎。请帮忙。 a =“/var/www/test/some/page3.html” 我需要将其转换为 a =“一些/ page3.html” 我想 a=$(sed "s~/var/www/test/~~g" $a) 但得到了 baaaad 结果。

回答 3 投票 0

将 JSON 导出到各个列

我有一个名为 df 的数据框,其中包含revieweddata 列。每行都有一个带有嵌套部分的 JSON 结构。我想将信息解压到单独的列中,但对于一些重新...

回答 1 投票 0

从 iTerm2 选项卡标题中删除 shell 名称

我检查了文档,但没有找到删除此内容的方法: 如果重要的话,我正在使用 oh my zsh,但即使我本机设置标题也会发生这种情况。

回答 1 投票 0

Git、Spring 工具套装:无法在弹出窗口中编辑用户名

我可以从私有存储库克隆项目;之后,我添加了新文件,当我尝试提交并推送时,预期的弹出窗口会显示存储库 URL 和不可编辑的用户名,...

回答 3 投票 0

MS Access VBA 无法处理环视。需要双早/晚正则表达式匹配。 “运行时错误‘5017’:应用程序定义或对象定义的错误”

这是关于 Aworking RegEx match that begin at the first of two OR-words 的后续问题,如果我在它之前放置更多的 RegEx [重复],则会采用不需要的最后一个 OR 字。谢谢去

回答 1 投票 0

Databricks SQL 将不接受相关列错误:非等式谓词中不允许相关列

我有一个包含相关列的 T-SQL 查询。当我尝试使用 Databricks SQL 执行查询时,出现错误: SQL语句错误:AnalysisException:相关列不是al...

回答 1 投票 0

获取特定系列的输出所需的 Excel 公式

第一列/系列是输入,第二列是所需的系列/结果/输出。例如,如果第一列中的值从 0,9,9,9 更改,则第二列中将显示 0,3,6,9。另一个

回答 1 投票 0

在函数签名中声明和命名类型,以便可以在函数中重复使用

我有一个实用函数,用于根据函子转换可交互对象。 模板 自动变换(可迭代 const& 输入,Functor&& trans...

回答 1 投票 0

如何将数据发送到 Chrome 扩展程序?

我正在为我的书签扩展开发用户身份验证。该扩展可与 http://ting-1.appspot.com/ 上的 Google App Engine (Python) 后端配合使用。 扩展第一次运行时,

回答 2 投票 0

无法获取正在运行的 Outlook 实例和新的 Interop.Outlook.Application 以管理员身份而不是 Windows 用户身份打开 Outlook

自从删除以前的 x86 Office 并安装 Office 2019 64Bit oOutlook = GetObject(, "Outlook.Application") 当 Outlook 已运行时不再有效,如果未运行则

回答 1 投票 0

嵌套 tibble 中的 Tidyeval 和 rlang

我在下面附上了一个简单的可重现示例。 我目前正在使用动态列名称的嵌套小标题中工作。我正在使用 purrr::map() 函数将列数据传递给匿名......

回答 2 投票 0

使用Flexbox复制leetcode的日历布局,但间隙不均匀且不一致

我正在尝试从leetcode的个人资料页面复制日历功能,如下所示。 [\[leetcode 的日历功能\](https://i.stack.imgur.com/OMUSJ.jpg)][1] 就这样完成了...

回答 1 投票 0

如何使用 Postgresql 将数据重塑为更长的格式?

我正在使用 Postgresql 数据库,其中数据的形状如下: A_a B_a A_b B_b 4 3 4 5 2 5 3 1 我如何重塑或旋转它,使其成为如下所示的较长格式? upper_c...

回答 1 投票 0

与sql中的另一个表合并时如何获取小于实际日期的最近行

考虑我有一个表,其中有一个每天生成的日期列,如下所示。 表格1 ID 名称 数量 日期 1 abc 20 17/01/2022 1 abc 10 18/01/2022 2 def 10 24...

回答 1 投票 0

如何缩放具有固定左上角的节点?

这似乎是一个简单的问题。但我没有找到简单的解决方案。如果缩放节点,新窗体将位于父窗体的中心。但我希望新表格具有相同的左上角...

回答 2 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.