Livewire3 wire:loadingについて

/ Livewire3 / By
ショコラ
ショコラ

Livewire3 wire:loadingについて

wire:loading のローダーがうまく表示されていないので対応してみた。

もっさん先輩
もっさん先輩

問題の処理。ファイルアップロード時にローダーが表示されるのですが、ファイルをアップロード処理（updatedFileメソッド）ではローダーが消えてしまうんです。wire:loading はアップロードだけなのです。

<div wire:loading wire:target="file">
  <div class="ui active inverted dimmer">
    <div class="ui medium text loader">Loading</div>
  </div>
</div>

クラス側で 処理フラグ の変数 を用意して、ファイルアップロードとは別にローダーを表示して対応しました。

public $isProcessing = false; // 処理中フラグ

public function updatedFile()
{
  // 処理中フラグＯＮ
  $this->isProcessing = true;

  $file = $this->file->store(path:'xlsx');
  $this->dispatch('processFile', $file );
}

#[On('processFile')]
public function processFile( $file )
{
  // ここで何か処理する

  // 処理中フラグＯＦＦ
  $this->isProcessing = false;
}

↓同じ処理を書いちゃっているのが無駄ですけど

<div wire:loading wire:target="file">
  <div class="ui active inverted dimmer">
    <div class="ui medium text loader">Loading</div>
  </div>
</div>

@if ( $isProcessing )
<div class="ui active inverted dimmer">
  <div class="ui medium text loader">Loading</div>
</div>
@endif

以上

Scroll to Top