如何仅将加载状态应用于 livewire 中的特定组件答案

【问题标题】：How to apply loading state only to particular component in livewire如何仅将加载状态应用于 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!');
    }
}

【问题讨论】：

即将能够将加载目标范围限定为带有参数的操作！
同样的用例，同样的问题，有什么更新吗？

标签： php laravel laravel-livewire

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

【讨论】：