如何仅将加载状态应用于 livewire 中的特定组件
Posted
技术标签:
【中文标题】如何仅将加载状态应用于 livewire 中的特定组件【英文标题】:How to apply loading state only to particular component in livewire 【发布时间】:2020-11-08 13:56:28 【问题描述】:我在我的项目中使用 Laravel Livewire,我使用 wire:loading
在单击时加载状态。我迭代了 foreach 循环中的所有任务,但加载状态适用于所有组件。这是代码。
刀片文件
GitLab:https://gitlab.com/tasklog/tasklog/-/blob/master/resources/views/livewire/home/tasks.blade.php
<button type="button" wire:click="togglePraise( $task->id , $task->user->id )">
????
<span class="small text-black-50 font-weight-bold">
$task->task_praise->count()
</span>
<div wire:loading wire:target="togglePraise">
Processing...
</div>
</button>
控制器文件
GitLab:https://gitlab.com/tasklog/tasklog/-/blob/master/app/Http/Livewire/Home/Tasks.php
public function togglePraise($id, $user_id)
if (Auth::check())
if (Auth::user()->id === $user_id)
session()->flash('message', 'Forbidden!');
return;
$isPraised = TaskPraise::where([
['user_id', Auth::user()->id],
['task_id', $id],
])->count();
if ($isPraised === 1)
TaskPraise::where([
['user_id', Auth::user()->id],
['task_id', $id],
])->delete();
return true;
else
TaskPraise::create([
'task_id' => $id,
'user_id' => Auth::user()->id,
]);
return true;
else
return session()->flash('message', 'Forbidden!');
【问题讨论】:
即将能够将加载目标范围限定为带有参数的操作! 同样的用例,同样的问题,有什么更新吗? 【参考方案1】:我知道问题是在 v2 发布之前,但添加 v2 的答案以供参考。
根据Livewire docs,如果您使用的是 v2,您可以在 wire:target 指令中指定操作及其参数。对于您的示例,它将是这样的:
wire:target="togglePraise( $task->id , $task->user->id )"
【讨论】:
【参考方案2】:我无法通过将目标加载到带有参数的操作来做到这一点,所以我将 jquery 与 livewire 一起使用
表格循环中的按钮,默认 d-none 加载图标类
<div class="col-3">
<button class="btn btn-sm btn-default btn-save ">
Save <span class="loading-icon d-none">
<i class="fa fa-circle-o-notch fa-spin" style="font-size:14px"></i></span>
</button></div>
调用livewire并启用加载的javascript代码
$('.btn-save').click(function (e)
e.preventDefault();
$('.parameter-value').removeClass("error-field");
var row = $(this).closest('tr');
row.find('.loading-icon').removeClass('d-none');
var parameter = row.data('parameter');
var value = $.trim(row.find('.parameter-value').val())
if(value == "")
row.find('.parameter-value').addClass('error-field');
else
row.find('.parameter-value').removeClass('error-field');
//Livewire call
@this.addParameterValue(parameter,value);
);
LiveWire 函数结束前调度浏览器事件
public function addParameterValue($parameterID,$value)
...
$this->dispatchBrowserEvent('parameter_value-saved');
从 javascript 结束处理浏览器事件并删除隐藏的加载图标
window.addEventListener('parameter_value-saved', event =>
$('.loading-icon').addClass('d-none');
)
【讨论】:
【参考方案3】:我和你有同样的问题。经过研究,我决定制作 2 wire:click
, IDK,如果这是解决此问题的最佳方法,但我就是这样做的
<div wire:loading wire:target="LoadingAnimation($loop->iteration)">
// icon loading or teks for showing this row load sth
</div>
......
<div wire:click="LoadingAnimation($loop->iteration)">
<a wire:click="setUpdateid($author->id)">
// your content here , teks or maybe an icon
</a>
</div>
如果您有任何问题,请告诉我,祝您编码愉快!
编辑:不要忘记在类中创建方法,例如 LoadingAnimation
和 setUpdateid
【讨论】:
以上是关于如何仅将加载状态应用于 livewire 中的特定组件的主要内容,如果未能解决你的问题,请参考以下文章
如何仅将 css 样式应用于特定的 Vue 组件及其子组件?
NSFetchedResultsController 仅将 NSSortDescriptor 应用于满足特定条件的条目?