Как применить состояние загрузки только к определенному компоненту в livewire

Я использую Laravel Livewire в своем проекте, я использую wire:loading для загрузки состояния при нажатии. Я повторил все задачи в цикле foreach, но состояние загрузки применяется ко всем компонентам. Вот код.

введите описание изображения здесь

Файл Blade

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
person Yogi    schedule 19.07.2020    source источник
comment
Скоро появится возможность масштабирования целей загрузки для действий с параметрами!   -  person Dan Harrin    schedule 19.07.2020
comment
тот же вариант использования, та же проблема, какое-либо обновление?   -  person fudo    schedule 29.10.2020

Ответы (2)


arrow_upward
2
arrow_downward

Я знаю, что вопрос был до выпуска версии 2, но я добавил ответ для версии 2 для справки.

согласно документам Livewire, если вы используете v2, вы можете указать действие и его параметры в директиве wire: target. Для вашего примера это будет так:

wire:target="togglePraise({{ $task->id }}, {{ $task->user->id }})"
person Fahd Yousri    schedule 22.02.2021

arrow_upward
0
arrow_downward

Мне не удалось это сделать, загрузив цели в действия с параметрами, поэтому я использовал 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>

Код Javascript для вызова livewire и включения загрузки

$('.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');
 })
person Pravin Shinde    schedule 14.04.2021